16:9+4:3

<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%;