Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题

最新推荐文章于 2024-10-06 20:02:57 发布

置顶

SHiny-Jun

最新推荐文章于 2024-10-06 20:02:57 发布

阅读量1.1w

点赞数 7

分类专栏： vue web

本文链接：https://blog.csdn.net/cuiji4724/article/details/83860052

版权

本文介绍了如何使用CSS3实现百度图片的横向瀑布流布局，并着重解决了object-fit属性的兼容性问题。通过flex布局、min-width和object-fit: cover属性，实现了图片的填充和比例保持。同时提供了两种解决object-fit兼容性问题的方法：使用张鑫旭老师的object-fit插件和使用background-size与background-position替代。最后给出了不存在兼容性问题的完整代码。

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

最近公司在做项目的时候需要用到横向瀑布流布局，在实现的过程中还遇到了object-fit兼容性问题，这里记录一下整个过程，想直接复制代码可以直接滚到底部。

在此先上个效果图：

（希望不要吐槽里面的小哥哥）下面正题：

用的框架是vue，v-for一下：

<section>
  // v-for就是根据imagesList数组去循环下面这个div部分。
  <div class="img-wrapper" v-for="(item, index) in imagesList" :key="index">
    <img class="img" :src="item.img" />
    <div class="info">
      <span class="size">helloworld</span>
    </div>
  </div>
</section>

重点css来了朋友们（这里是scss）：

section {
  display: flex; // 这里用到flex布局
  flex-wrap: wrap; // flex中换行的属性
  padding: 15px 5px;
  &::after{ // 用于最后一行最后的位置显示空白
    content: '';
    flex-grow: 99999;// 放到最大
  }
  .img-wrapper {
    flex-grow: 1; // 根据比例计算每个图片多长等分剩余空间（好难解释，下面用图解释）
    margin: 5px;
    position: relative;
    overflow: hidden; // 把多余的部分隐藏
    .img {
      height: 170px;
      min-width: 100%; // 要让左右的图片横向是充满他父级标签的宽度
      object-fit: cover; // 让图片不要压缩
    }
    .info{ // 选中时底部提示框
        position: absolute; 
        bottom: 4px;
        color: #ffffff;
        left: 0;