css 控制图片的横竖比例

大概你也遇到过"图片高度是宽度50%"这的需求
这需求看起来简单, 其实却非常麻烦

因为元素的宽高的百分比是相对于父元素的宽高计算的
所以直接设 width, height 是不符合预期的

.div {
   
	width: 100%;
	height: 50%;
}

而且一个空 display: block 元素 height 的默认值是 0px; 如果父元素没设 height 的话, 该元素的 height 就是 0px

---

如果是位置比较浅的元素, 其实可以用 css3 的新单位 vw, vh 来实现

.img {
   
	width: 100vw;
	height: 50vw;
}
.img {
   
	width: 100vh;
	height: 50vh;
}

但如果是位置比较深的元素, 那么比率就会难以计算
vw, vh 也难以实现这个需求

---

这个时候我们就可以利用 padding 了, 因为 padding 的百分比是相对于父元素的宽计算的, 这样纵向和横向就能统一