css实现盒子高度随宽度等比例缩放的四种方式

前提：先去下margin,padding,方便看效果

*{
    margin:0;
    padding:0
}

方法一：定位
css

.container {
    background-color: silver;
    width: 100%;
    position: relative;
    display: inline-block;
  }

  .dummy {
    margin-top: 100%;
  }

  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

hmtl

<div class='container'>
    <div class='dummy'></div>
    <div class='content'>content</div>
  </div>

方式二：css3 vm
利用使用vw直接搞定

.container {
    background-color: silver;
    width: 100%;
    height:100vw;
  }

方式三：img填充
利用img标签特性，放一张图片，让高度随着高度随着比例缩放（可以用base64弄张体积小的图）

.attr img{
    width: 100%;
    height: auto;
    dislplay:block;
  }

<div class='attr'>
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2460827703,4239870726&fm=26&gp=0.jpg" alt="">
</div>

方式四：padding
利用padding属性使用百分比继承父元素宽度的特性
css

#container {
    width: 80%;
    height: 500px;
}
 
.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}

html

<div id='container'>
    <div class='attr'></div>
</div>