所以对图片高宽举办同时约定照旧有须要的，可是同时要担保宽度自适应，好像有点难度。记着，假如碰着这种需求场景，没有比百分比padding机关更好的做法！
缩小欣赏器宽度可以看到差异宽度下的机关结果，Gif结果截图如下：
此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有机关稳固不晃动，其焦点HTML和CSS代码如下：
<div> <img src="https://www.jb51.net/article/150x200.png"> </div>
.works-item-t { padding-bottom: 133%; position: relative; } .works-item-t > img { position: absolute; width: 100%; height: 100%; }
可以看到，当把垂直偏向padding值只利用padding-bottom暗示的时候，假如没有text-align属性滋扰，<img>元素的left:0;top:0是可以省略的。
对付这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值巨细就是图片元素的高宽比，就这么简朴。
但，有时候，图片宽度并不是100%容器的，譬喻，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直偏向百分比就666了，如下：
.img-box { padding: 0 50% 66.66% 0; }
您大概感乐趣的文章: