CSS：使图像填充 parent 但不更改 parent 大小

Question

我有一个图片库，所有图片都是正方形的。图像在它们的 div 和一个大 div 中，显示可以弯曲到 parent 所有 div。我想让图片填满 parent div，但不要让它们变大。

更新：我在 this website 上看到 flex-grow 属性不会增加元素的（可用）宽度。去网站上查看进一步的解释，但这意味着我必须使用 flex-grow 以外的东西来使我的 parent divs 成为顶部 div 的宽度。
另外，我不希望一条线上有固定数量的物品！！我想要的是当你放大 window 时，元素变得越来越宽直到一个点，然后你缩小元素并从下面添加一个到上面的行。

这是我的资料：

这是我想要的：

这是我的代码：

.ImagesContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-top: 1rem;
    width: 100%;
}

.ImagesContainer img {
    width: 20vw;
    min-width: 200px;
    margin: 5px;
    transition-duration: 200ms;
}

.ImagesContainer div {
    background-color: red;
    flex-grow: 1;
}

<div class="ImagesContainer">

  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>

</div>

有人知道吗？

Answer 1

您只需要为图像包装器指定宽度并适当地适合图像。如果您希望看到 div 的某些部分，可以向其添加填充属性。通过将“object-fit: cover” 属性添加到您的图像中，您可以缩放它以适合其父级的宽度，并且“object-position: center” 以防您的图像不是正方形并且是它被剪掉了。

    .ImagesContainer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        margin-top: 1rem;
        width: 100%;    
    }

    .ImagesContainer img {     
        transition-duration: 200ms;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .ImagesContainer div {
        background-color: red;
        flex-grow: 1;    
        width: 20vw;
        min-width: 200px;
        padding: 5px;
    }

    <div class="ImagesContainer">
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>

    </div>

Answer 2

更新：我使用的方法（With flexbox）最终没有达到我想要的效果，所以我决定使用 css 网格，它完美地完成了！
这是新的css（相同的html）：

.ImagesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem;
    width: 100%;
}

.ImagesContainer img {
    width: 100%;
    height: 100%;
}

.ImagesContainer a {
    padding: 5px;
}

谢谢大家，你们的回答帮助我更好地理解了css！

CSS：使图像填充 parent 但不更改 parent 大小

CSS: Make image fill parent but not change parent size

html

css

flexbox