css - 强制显示内联响应图像

Question

我需要显示一个 5x3 的图像网格。无论屏幕分辨率如何，此网格都需要保持相同的格式和大小。图像本身将响应调整大小。

我有一个显示在内联块中的图像列表，如下所示：

<div class="gridView">
  <ul>
    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>
  </ul>
</div>

CSS是这样的：

.gridView {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    text-align: center;
    width: 100%;
}

.gridView ul li {
    height: 100%;
    max-height: 150px;
    max-width: 200px;
    width: 100%;
}

现在，当我调整窗口大小时，网格不会保持它的大小固定。如何确保网格保持不变，但只有图像自己调整大小？

Answer 1

如果您想保持布局结构相同，如下所示：

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

那么您将不需要液体网格系统，而是需要液体图像。我要做的是：更改 .gridView ul li 样式，以便设置一个简单的高度和宽度声明，而不是最大高度和宽度。

.gridView ul li {
height: 150px;
width: 200px;
}

然后添加一个图像类以使图像响应：

.img {
max-width: 100%
height: auto;
}

当然，图像文件的最大尺寸应为 150 像素 x 200 像素。

这样，您的网格不会随着您的浏览器宽度变小而折叠，并且您的图像将变小以适合网格。

希望这可以帮助！

Answer 2

宽度：100%；将始终更改元素相对于父元素/窗口的大小。对于固定宽度，您需要固定宽度。就这么简单：

width: 1200px;