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

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中编码，不会让文章超过500像素。我可以处理更小的图像，如果其中一篇文章小于其他文章，则不会破坏版面，如果文章比其他版本更大，则只会打破版面。

可能是一个非常简单的问题，但拉我的头发试图弄清楚。

Answer 1

尝试增加：

max-width: 500px; 

你列。