CSS:
/* box 用来控制宽度 */
.box {
width: 20%;
}
.scale {
width: 100%;
height: 0px;
/* scale 用来实现宽高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */
padding-bottom: 56.25%;
position: relative;
background-color: pink;
}
.box .scale .item {
width: 100%;
height: 100%;
position: absolute;
color: red;
}
HTML:
<body>
<div class="box">
<div class="scale">
<div class="item">
<img src="">
</div>
</div>
</div>
</body>