商品两列显示css || image按比例剪裁

JiaoJiao Zhang

已于 2022-08-08 23:25:53 修改

阅读量302

点赞数

文章标签： css 前端 html

于 2022-08-08 23:19:22 首次发布

本文链接：https://blog.csdn.net/VR_dancy/article/details/126238289

版权

这篇博客探讨了两种实现HTML中图像按比例剪裁的方法。第一种是利用CSS的`aspect-ratio`属性，但提到了可能存在的兼容性问题。第二种方案是通过设置包含元素的padding-top来实现等比裁剪，确保图像在不同设备上保持原比例填充。代码示例展示了如何使用CSS的`object-fit: cover`属性确保图像覆盖整个容器并保持比例。

摘要由CSDN通过智能技术生成

HTML 
<div class="list flex flex-wrap px-24">
    <template v-for="item in config.list">
       <div class="list-items" @click="bindNavigate(item)">
          <div class="list-pic relative">
            <img class="absolute left-0 top-0 w-full h-full" :src="toThumbnail(item.artwork.image_url_list[0])" />
          </div>
        </div>
    </template>
</div>

CSS
.list-items {
  flex: 0 0 calc(50vw - 24px - 12px);
  border-radius: 10px;
  margin-bottom: 32px;
  &:nth-child(2n) {
    margin-left: auto;
  }
}
.list-pic {
  width: 100%;
  padding-top: 100%;
  img {
    border-radius: 8px;
    object-fit: cover;
  }
}

2. image按比例剪裁

方案一 aspect-ratio

问题：兼容问题

方案二：padding

<div class="image-container relative">
    <img class="sale-image" :src="item.image_url_main_page">
</div>

.image-container {
  position: relative;
  width: 100%;
  padding-top: 37.3%;  //宽：高 = 100:37.3
  border-radius: 10px;
}
.sale-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; //图片小于区域宽度时，拉伸到区域右端
  bottom: 0; //图片小于区域高度时，拉伸到区域底部
  object-fit: cover; //原图比例，填满区域
  border-radius: 10px;
}