场景:展示图片列表的时候,原始图片宽高不一致。
外层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是一样的值*/