图片网格适合窗口

Question

我有9张图像，它们的大小和纵横比都不同。我想创建一个3 x 3的网格，其中每个图像将调整其大小以填充其单元格并在其单元格中居中。另外，我希望网格填充浏览器窗口，并在调整浏览器窗口大小时重新调整自身。

结果应如下所示：

我已经尝试过同时使用flex和grid布局，但是我确信我的尝试过于复杂和不雅观。

预先感谢您提供有关如何通过简单CSS实现此目标的任何建议。

Answer 1

尝试在 img 标签上使用object-fit: cover;和object-position: center;。

Answer 2

如果您愿意使用稍微更高级的CSS，可以考虑使用Pure CSS library。它是开源的，类似于引导程序，但更小且模块化，因此加载速度更快。他们有一个允许发生这种事情的网格系统。 This page具有使用“纯网格”模块构建的网格。

Answer 3

尝试使用其他屏幕尺寸：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

在示例中，它显示为按列排列，您也可以使网格也按行排列。

Answer 4

按照如下所示的大图排列图像，并为每个图像提供所需的背景图像：

<div class="container">
  <div class="img" style="bacground-image: url('image1-location')"></div>
  .
  .
  .
  <div class-"img" style="bacground-image: url('image9-location')"></div>
</div>

然后，css部分应该是这样的（请注意，尺寸只是示例）

.container {
  height:500px;
  width: 100%;
}

.img {
  width: 33%;
  height: auto;
  background-position: center;
  background-size:cover;
}

如果将宽度设置为33％，则3个容器应位于同一行。