有这样一个场景:如何让img自适应容器(div)图片,必须等比缩放
<div>
<img src="xxx.jpj" />
</div>
在我们一般的使用过程中可能会
img{
width:100%;
height:100%;
}
但是如此使用我们的图片会打拉伸,会失真,其实我可以这样来设置
img{
max-width:100%;
max-height: 100%;
}
拿我们来看看width和max-width或者说height和max-height
其实这里有一个需要我们记住的概念
width或者height是相对于父元素
而max-width或者max-height是相对于img自身元素
这样我们就不难理解了所以为了不让图片失真,我们设置图片最大的大小为图片自身的大小
我们在来看看max-XX的具体可以设置那些值
-
none,规定元素的最大宽(高)度没有限制
-
length ,规定元素最大宽(高)度为 length
-
%,规定元素宽(高)为包含他块级元素的百分比,比如父亲为100PX 这里设置20%就是最大为20px
-
inherit,规定应该从父元素继承 max-width 属性的值。
网友评论