具有可变宽度的可变列的 CSS 图像流

Question

我想使用 CSS 来定义一组可以填充页面宽度的图像。我希望图像根据页面的宽度而变化，比如 100px 和 125px。如果页面宽度为 400px，则将有四列 100px 宽的图像。如果页面扩展到 500 像素，仍然会有四列，但图像将扩展到 125 像素。如果页面加宽到 550px，列将增加到 5，但现在图像将减少到 110px 宽。

我可以让我的图像流动，但它们保持相同的大小。我想要一个图像扩展的解决方案，以便网格始终完全对齐，并在元素达到最大大小时添加额外的列。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, max-content));
  gap: 10px;
}

.grid a img {
  width: auto;
  min-width: 100px;
  max-width: 125px;
}

<div class="grid">
  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

</div>

Answer 1

我对你的代码做了一些修改

我在下面添加了

grid-template-columns: repeat(auto-fill, minmax( 150px, 1fr));

和一些CSS代码。我希望它对你有用。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax( 150px, 1fr));
  grid-gap: 10px;
  flex-wrap:wrap;
}

.grid a img {
 width: 100%;
 height:100%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

<div class="grid">
  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/450/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/350/100" alt="random">
  </a>

<a href="https://google.com">
    <img src="https://loremflickr.com/250/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

<a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>

  <a href="https://google.com">
    <img src="https://loremflickr.com/150/100" alt="random">
  </a>


</div>

Answer 2

要实现所需的行为，您可以使用 CSS

@media

查询根据页面宽度调整图像的宽度和列数。

首先，设置普通网格中图像的最小和最大宽度：

.grid a img {
  min-width: 100px;
  max-width: 125px;
}

Then, define a media query for each range of widths that you want to handle. For example:

@media (min-width: 400px) and (max-width: 549px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid a img {
    width: 110px;
  }
}

@media (min-width: 550px) and (max-width: 674px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid a img {
    width: 110px;
  }
}

/* Add additional media queries as needed */

注意 grid-template-columns 属性指定网格中列的数量和大小，而 width 属性调整这些列中图像的大小。

使用这种方法，列数和图像大小将随着页面宽度的变化而动态变化。

这是包含媒体查询的 .grid 类的更新 CSS 规则：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, max-content));
  gap: 10px;
}

@media (min-width: 400px) and (max-width: 549px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid a img {
    width: 110px;
  }
}

@media (min-width: 550px) and (max-width: 674px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid a img {
    width: 110px;
  }
}

/* Add additional media queries as needed */