设置宽高相等的背景图片

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