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

Question

我有一个图片库，所有图像都是正方形。图像位于它们的 div 和一个大 div 中，显示屏可以弯曲以成为所有 div 的父级。我希望图像填充其父级 div，但不要使它们变大。

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

这是我所拥有的：

这就是我想要的：

这是我的代码：

.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

更新： 我使用的方法（使用 Flexbox）最终没有达到我想要的效果，所以我决定使用 css grid，它完美地完成了！
这是新的 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！

Answer 2

以下是应该进行的更改：

• 如果使用

  width

  等单位设置

  img

  if

  vw

  ，则不会考虑父级的宽度，因此图像无法填充父级。相反，您可以设置

  img {width: 100%;}

  。

• 使用

  width: 100%

  和

  margin

  ，图像会突出到父级之外。不要给图像一个

  margin

  ，而是给它的父图像

  padding

  。

• 要实现所需的

  width: 20vw

  和

  min-width: 200px

  ，请将它们设置为父 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>