如何使区块保持比例自动缩放

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这些高端手机都支持，但是普通手机浏览器很多都不支持。