css - 使图像适合网格，使其占用所有可用空间

Question

我正在尝试创建简单的 2x2 图像网格。

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .imagewrapper {
  width: 50%;
}

.container img {
  width: calc(100% - (5px * 2));
  margin: 5px;
}

<div class="container">
  <div class="imagewrapper">
    <img src="..." />
  </div>
  <div class="imagewrapper">
    <img src="..." />
  </div>
  <div class="imagewrapper">
    <img src="..." />
  </div>
  <div class="imagewrapper">
    <img src="..." />
  </div>
</div>

它看起来有点像更多的样式:

但是当我加载照片代替占位符时，它会变成:

我希望图像始终占据与占位符相同的空间。没有拉伸(stretch)。我一直在研究 object-fit 属性，但我似乎无法弄清楚如何去做。

TLDR:我想创建一个 2x2 响应宽度网格。无论比率如何，所有图像都占据相同的空间。

知道如何创建这样的网格吗？如果需要，我很乐意使用不同的 html。

编辑:

当我将 .container img 更改为:

.container img {
  width: calc(100% - (5px * 2));
  height: 158px;
  object-fit: cover;
  margin: 5px;
}

看起来像这样:

这是我会很高兴的事情。但问题是我必须修复高度并且我希望尽可能保持响应。

Answer 1

你还必须给图像一个高度，这样它“知道”要覆盖哪个高度。

//编辑问题更新后，它声明不应使用固定高度。在这种情况下，将 img 标签的高度设置为 100%，并将 align-items: stretch 添加到 flex-container。

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.container .imagewrapper {
  flex-basis: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 5px;
  box-sizing: border-box;
}

.container .imagewrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  
}

<div class="container">
  <div class="imagewrapper">
    <img src="https://dummyimage.com/300x150/e61ce6/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/200x350/1ecfe6/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/100x150/ffcc00/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/250x100/297984/fff" />
  </div>
</div>

如果网格实际上固定为 2x2 并且您想填充整个页面，那么实际使用网格(而不是 flexbox)可能会更好:

body {
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  grid-template-columns: 50vw 50vw;
  grid-template-rows: 50vh 50vh;
  height: 100vh;
  width: 100vw;
}

.container .imagewrapper {
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.container .imagewrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  
}

<div class="container">
  <div class="imagewrapper">
    <img src="https://dummyimage.com/300x150/e61ce6/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/200x350/1ecfe6/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/100x150/ffcc00/fff" />
  </div>
  <div class="imagewrapper">
    <img src="https://dummyimage.com/250x100/297984/fff" />
  </div>
</div>