利用 :before 特性实现图片按比例显示

标签：

好吧，想不到自称布局小沙弥的我会被图片按比例显示给尴尬到。

设计师跟我说，这里的图要按 750x330 的，好吧，但这图是屏宽呀，屏幕宽度会变化的，那高度也会不定咯，

要么裁图片(工作量大)，要么给定高（图片会比例不对，或者用 background 显示不全），来体会一下...

 当宽度变化时，立马就呵呵了，一脸懵逼...

后来吧，在研究大量图片数据加载优化问题时，去调研了下淘宝天猫京东，然后一不小心发现了 :before 这种布局方式，先看一眼代码

.img {
　　position: relative;
}
.img:before {
　　content: "";
　　width: 100%;
　　padding-top: 66.6666666%;
　　display: block;
}
.img > img {
　　position: absolute;
　　top: 0;
　　left: 0;
　　right: 0;
　　bottom: 0;
}

它利用了 :before 的特性，即，相对于该元素百分比。

不管 .img 的宽度为多少，:before 的高度使用是它的 2/3，也就是宽高比始终 3：2，至于子级内容，你懂的...

于是乎，这篇博客愉快地结束了。

利用 :before 特性实现图片按比例显示

标签：

原文地址：http://www.cnblogs.com/foreverZ/p/constrain-img-proportion-width-before.html