也是看了同僚的写法后才明白的
一般的如果有具体的大小的元素，就直接一样大小的具体宽高就可以了，
但有时候我们会遇到根据屏幕宽高来确定元素宽高的时候，而浏览器我们又不能确定，这时候，按照往常的习惯，也许会在css中用百分比或rem确定元素的宽，再在js中set 元素的高跟我们取到的宽一样，只是我想用css试试，看能不能搞定，结果自己钻，不行，然后查百度：
<style>
.outerbox{
position: relative;
width:30%;
float: left;
}
.innerbox{
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%;
}
.outerbox img{
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
<div class="outerbox">
<div class="innerbox">
</div>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1527497896&di=f15284e6b7468542e8a82da302a52ca3&src=http://zy.saier360.com/uploadfile/2014/0429/20140429012637393.jpg">
</div>
这里用的到的想法是padding-bottom 基于元素的宽度去生成这样就撑出了一个宽高一样的盒子outerbox，我们在outerbox下面放图片或其他的元素都可以了
