img与固有宽高比 | soHappy

img元素默认拥有固有宽高和固有宽高比

一张图片就像美女,天然的最美,如果远看(等比缩小),还是美的,如果你拿个哈哈镜(图片拉伸)或者放大镜(图片等比放大)看,就算天生丽质也成如花。举个栗子:

栗子1
1
2
3
<img src="poster.jpg" />
<img src="poster.jpg" style="width: 100px" />
<img src="poster.jpg" style="width: 50px; height: 200px" />


1、当img宽高计算值都为auto时,会显示成自身固有的宽高
2、当img宽为设定值,高为auto时,高 = 宽*固有宽高比
3、当img宽高均为设定值,显示为设定值。(设定值宽高比不同于固有宽高比,就会发生图片拉伸)

要避免图片拉伸,很简单—宽和高只要设置一个就行了,另一个就使用默认值auto(一般情况不用去显式的设置),这样浏览器会根据一个设定值和她的固有宽高比来计算她的另一个属性值(宽或高)。
在自适应布局中,为了避免图片设置width:100%而使图片被放大,我们通常这样设置max-width:100%;。看栗子2:

栗子2
1
2
<img src="poster.jpg" style="width: 100%;" />
<img src="poster.jpg" style="max-width: 100%;" />


1、设置width: 100%图片等比自适应父容器宽度,有可能会等比放大。
2、设置max-width: 100%注意这里的100%的参照物就是图片自身,当父容器宽度 > 图片宽度,图片保持自身固有宽高;当父容器宽度 < 图片宽度,图片等比自适应父容器宽度。

其实还有个与img相似的元素那就是video元素,以上列举的img的特性,同样的适用于video元素,有兴趣的同学可以去试试。

利用padding来实现普通元素的固有宽高比

看栗子3:

栗子3
1
<div style = "padding-bottom: 50%; background: blue"></div>


其他元素在设置padding时(无论padding-top/left/right/bottom),百分比参照的都是父容器的
利用这个特性,可以让一个元素的盒模型的宽和高形成一个固定的比例
局限性:为了不破坏这个比例,其高度计算值必须为0。