1. 对于img元素而言，使用auto height：
img{
min-width: 100%;
height: auto;
}
2.不过对于DIV块元素，这样做没用，块大小总是按照内容或内含元素来匹配。
解决方案是使用padding-top/padding-bottom 100%的空元素，如下所示：
.box{
position: relative;
width: 50%;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
或者
.box:before{
content: "";
height: 0;
padding-bottom: 100%;
}
在放置内容在这个box上的时候，使用绝对位置：
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
通过调节padding-bottom比例来调整横宽比例。比如padding-top:75%，就是4:3的比例。
3.使用vm/vh，不过这个依赖于浏览器是否提供了支持，一般现代桌面浏览器以及iPhone/Samsung这些高端手机都支持，但是普通手机浏览器很多都不支持。
