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

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；

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

可能是一个非常简单的问题，但我绞尽脑汁想弄明白。

Answer 1

尝试添加:

max-width: 500px;

到您的专栏。