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;
}

当然，图像文件大小最大应为150px x 200px。

这样，当您的浏览器宽度变小时，您的网格不会崩溃，并且您的图像会变小以适合网格。

希望这有帮助！

Answer 2

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

width: 1200px;

强制显示内联响应图像

2 个答案: