设置宽高相等的背景图片

宽高相等的图片在需求中是常见的，比如外卖网站食物详情页食品详情的照片一般都是宽高相等的图片，那么如何达到这种效果呢（即使图片原本不是宽高相等的）。一段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%;
}

步骤：

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

2. 设置图片绝对定位，height：100%，width：100%。

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