设置宽高相等的背景图片

宽高相等的图片在需求中是常见的，比如外卖网站食物详情页食品详情的照片一般都是宽高相等的图片，那么如何达到这种效果呢（即使图片原本不是宽高相等的）。一段css代码解决需求。

html

<div class="wrapper">
<img src="XXX.jpg">
</div>

CSS

.wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 100%
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

步骤：

让一个div.wrapper包裹图片，设置width宽度为100%，（width为100%是取决于div.wrapper父级元素的宽度），height为0，padding-top为100%。

设置图片绝对定位，

height：100%，width：100%

。

注意： 图片的宽高取决于div.wrapper的宽高，而不是图片本身的宽高。