<div class="proportion-box"> <div class="box"> <div class="scale"> <div class="item"> <img src="../../../skin/zh_CN/images/skin/news-article.png"> </div> </div> </div> <p>16:9</p> </div> <div class="proportion-box"> <div class="box"> <div class="scale2"> <div class="item"> <img src="../../../skin/zh_CN/images/skin/news-article.png"> </div> </div> </div> <p>4:3</p> </div>
.proportion-box p{ font-size: 16px;text-align: center; padding:10px 0; color:#999; } .proportion-box .box {width: 400px;overflow: hidden;border-radius: 4px;} .proportion-box .scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;} .proportion-box .item {width: 100%;height: 100%;background-color: #ccc;overflow: hidden;position: absolute;} .proportion-box .scale2 {width: 100%;padding-bottom:75%;height: 0;position: relative;}
box 用来控制宽度
scale 用来实现宽高等比例
1:1 padding-bottom:100%;
4:3 padding-bottom:75%;
16:9 padding-bottom:56.25%;