div自适应宽高保持比例不变

当屏幕宽度发生变化时我们通过百分比即可实现div的宽度自动变化，但是高度就比较麻烦了，很多时候我们都需要div自适应的时候能够保持宽高比例不变，这时就需要用到下面的方法。

一、设置一个能够自适应宽高得div。

div{
    width: 50%;
    padding-bottom: 50%;
    height: 0;
    background: #222;
}

解释：1、我们指定div的width为父级元素的一个固定百分比，以此自适应宽度。

          2、设置高度为0，内边距为50%（内边距的计算以父级元素的宽高为基础），这样就有了一个正方形的div了，效果如下图灰白色的div。

二、div内部内容。

这个div的高度为0，那如果我要在element里放置元素呢，那岂不是没办法了，有办法，我们可以对内容进行相对定位。

div容器

div{
    width: 50%;
    padding-bottom: 50%;
    height: 0;
    background: #222;
    position: relative; //设置定位点
}

div内容

div img {
    position: absolute;
}

这样就可以正常显示了。并且成功的自适应保持宽高比例不变。