【css】html里面的图片宽度设为百分比，高度要与宽度一样

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

外层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是一样的值*/

原文地址：https://blog.csdn.net/xiaoxiong_jiaxin/article/details/143702862

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！