南阳网站建设培训网页链接制作生成

场景：展示图片列表的时候，原始图片宽高不一致。

外层div的宽度自适应，图片宽度不能固定数值，只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢？

html代码 ： 

<div class="box"><div class="father-img"><img src="img.png" alt="商品详情"></div><div class="desc-info">￥100</div>
</div>

css代码： 

.box{width:calc((100% - 64px) / 4); /* 最外层div宽度自适应 */
}.father-img {position: relative;width: 100%; /* 容器宽度 */height: 0; /* 容器高度 */padding-bottom: 100%; /* 这里的百分比值应与图像宽度相同 */
}
.father-img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;/*object-fit属性：可设置为cover、contain等，和background-size是一样的值。*/object-position: center;/*object-position属性：可设置为center、left等，和background-position是一样的值。*/
}

最终效果图： 

img标签实现background-size:cover（图片拉伸、缩放）等效果

object-fit: cover;/*可设置为cover、contain等，和background-size是一样的值*/
object-position: center;/*可设置为center、left等，和background-position是一样的值*/