CSS实现宽度自适应100%，宽高16:9的比例的矩形

版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/Mr_WEB_Yao https://blog.csdn.net/Mr_WEB_Yao/article/details/80898040

<style>
/* box 用来控制宽度 */
.box {width: 100%;}
/* scale 用来实现宽高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */
.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
/* item 用来放置全部的子元素 */
.item {width: 100%;height: 100%;background-color: #000;position: absolute;}
</style>

<div class="box">
	<div class="scale">
	    <div class="item">
	        <img src=""/>
	    </div>
	</div>
</div>