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

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

大多数图像的高度为500px。有些人在这里有几个，有超过500px;

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

可能是一个非常简单的问题，但是想把它弄出来试图找出来。

Answer 1

尝试添加：

max-width: 500px;

到你的专栏。