固定元素宽高比

大家可以先想想，如果有这样一个需求：只能使用 CSS，如何让元素大小可以随页面动态变化，同时保持宽高比不变？

1 padding-top/padding-bottom

看到这里，也许诸位看官会惊讶万分分，what？？？我每天都在用 padding，我怎么不知道有这种操作？padding 可以实现固定元素宽高比？？？当然（实话是，我之前也是一脸懵逼的）。话至此处，就必须从根本上说明问题了。请看 padding-top/padding-bottom 的定义：

值描述length

规定以具体单位计的固定的上（下）内边距值。比如像素、厘米。默认值为0。

%定义基于父元素宽度的百分比上（下）内边距。inherit从父元素继承上（下）内边距。

嗷...嗷...嗷......是否恍然大悟？是否意识到了查看文档的重要性？

之所以能够使用 padding-top/padding-bottom，就是因为当它们的值为百分数时，是以父元素宽度为参考的。

代码如下：

.with-padding-bottom {

    width:30%;

    height:0;

    padding-bottom:15%;

}

2 vw / vh

vw相对于视窗的宽度。1vw 等于视窗宽度的1%。vh相对于视窗的高度。1vh 等于视窗高度的1%。vminvw 和 vh 中较小的那个。vmaxvw 和 vh 中较大的那个。

vw/vh 相对而言容易理解，这里就不再赘述了。

代码如下：

.with-vw {

    width:30vw;

    height:15vw;

}

更多 CSS 技巧，请关注微信公众号