html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端

写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况：

div{width:400px;height:400px;border:1px solid #000; }

img{width:100%;height:100%;}

不管容器有多大，只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。

那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。

假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改.

img{max-width:100%;max-height:100%;}

max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。

具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。

图片适应手机端  要控制的是装图片的容器宽度

img{

display: block;(可不加 banner可以用)

height: auto;

max-width: 100%;(或者width：100%)

}

将以上标签加入之后保存，再用手机打开即是自适应网页了。

原文：https://www.cnblogs.com/kenshinobiy/p/13258132.html