元素宽高成比例自适应

前言

在开发过程中，我们经常会遇到让元素的宽高成一定比例的情况。或者在使用轮播图时，如果我们只是靠图片撑开元素的高度，那图片未加载出来时，页面会出现抖动的情况。为了避免这种情况，我们就需要让容器宽高成一定比例，如果图片是600*300的尺寸，我们就需要让容器的宽高比为2:1。

第一种方式

我们可以使容器的宽度为100%，但高度不能使用50%，因为元素的高度是根据父元素的高度为基数的，并不是宽度。那我们这时候就需要用一点小技巧了，我们知道元素的padding值都是以父元素的宽度为基数的。那我们就可以这样实现：

div {
    width: 100%;
    height: 0; // 防止内容撑开高度
    padding-bottom: 50%;
    overflow:hidden;
}

其实代码很简单，主要是记录一下思路。

第二种方式

还有另一种实现方式：使用vw，相对于视口的宽度，视口被均分为100单位的vw

div{
    width:100vw;
    height:50vw;
}

但是这种目前兼容性不是很好，所以如果需要兼容性好的话，还是使用第一种方法吧！