如何阻止流体网格元素的高度破坏布局

Question

我正在使用普通的 css 网格布局构建一个站点，而不是“网格”，而是使用元素宽度的百分比。它从移动端的 100% 上升到 50%、33% 和 25%。分别为1列、2列、3列、4列。

我正在使用 api 在 wordpress 中提取图像。不过，我无法完全控制图像大小。有些图片比较小，有些图片非常大。

比如说我的代码是

.span_1_of_4 {
width:100%;
}

在更高的像素，它的

.span_1_of_4 {
width:50%;
}

在更高的像素，它的

.span_1_of_4 {
width:33%;
}

在更高的像素，它的

.span_1_of_4 {
width:25%;
}

大多数拉入的图像高度为 500 像素。有些在下面，有些在这里，超过 500px;

当拉入较大的图像时，它们会拉伸文章 (.span_1_of_4)，然后它会破坏整个布局。它向下推它下面的元素。有什么方法可以在 css 中编码，不允许文章超过 500px。我可以处理较小的图像，如果其中一篇文章比其他文章小，它不会破坏布局，只有当它比其他文章大时才会破坏它。

可能是一个非常简单的问题，但我想弄清楚它。

Answer 1

尝试添加：

max-width: 500px;

到您的专栏。