css之动态固定高宽比

宽（width）可以使用百分比（如100%）动态改变宽度，那如何动态固定高度，与宽成比例呢？

有个小技巧，width:<percent>与padding-top:<percent>之比就是宽高比。因此例子如下：

css

.container {
   background-color: red;
   position: relative;
   width: 50%;
   padding-top: 50%; /* 1:1 Aspect Ratio */
}

.text {
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}

html

<div class="container"> 
 <div class="text">1:1 Aspect ratio</div> 
</div>

其他的比例也行，如：

	width: 100%;
	padding-top: 56.25%; 

即，100/56.25=16:9，其他都一样。