图片 自适应 容器大小
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况:
1 <style> 2 3 div{ 4 width:400px; 5 height:400px; 6 border:1px solid #000; 7 } 8 9 img{ 10 width:100%; 11 height:100%; 12 } 13 14 </style>
不管容器有多大,只要将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%
}
将以上标签加入之后保存,再用手机打开即是自适应网页了。
你好,欢迎你来到博客,我是布莱昂。在这里你将看到我关于前端技术和框架的一些理解和体会,并且以后所有博客将在这里发布,由于本人技术水平和认知能力有限,文中难免有认识不足和理解错误的地方,欢迎大家留言指正,我将感激不尽!