响应式设计：如何使区块保持比例自动缩放

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

.Box {width: 25%; height: 100%vw}

参考阅读：

http://siebennull.com/equal_width_height.html   （内容块）

http://beta.rdsign.net/exemple/ratio-video-intrinseque/test.html  （视频块）

http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

by iefreer