一个拥有固定比例的盒子

要创建一个固定比率的容器，唯一要做的就是给div设置padding-top或者padding-bottom。

这个青色的盒子就这样，不论显示窗口的宽度怎么变，他都会保持自己固定的横纵比（5：1）。

CSS:

.wrapper-with-intrinsic-ratio {
	height: 0px;
	padding-bottom: 20%;
	position: relative;
}
.element-to-stretch {
	background: #008080;
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

HTML:

<div class="wrapper-with-intrinsic-ratio">
  <div class="element-to-stretch"></div>
</div>