将图像拟合到网格中，以便它使用所有可用的 space

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>

它看起来有点像，但样式多了一点：

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

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

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

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

编辑：

当我将 .container img 更改为：

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

看起来像这样：

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

Answer 1

你还必须给图像一个高度，这样它 "knows" 要覆盖哪个高度。

// 编辑： 更新问题后，它声明不应使用固定高度。在这种情况下，将 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>

将图像拟合到网格中，以便它使用所有可用的 space

Fitting the image to the grid so it takes all available space

css

responsive-design