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