流体グリッド要素の高さをブロックレイアウトから停止する方法

Question

"グリッド"ではなく、要素の幅にパーセンテージを使用して、通常のCSSグリッドレイアウトを使用してサイトを構築しています。モバイルで100％から50％に、33％から25％に変わります。 1列、2列、3列、4列とする。

私はapiを使ってwordpressで画像を取り込んでいます。私はイメージのサイズを完全に制御することはできません。一部の画像は小さく、一部の画像は実際に大きくなっています。

は、例えば私のコードは、その

.span_1_of_4 { 
width:25%; 
} 

高いピクセルで

.span_1_of_4 { 
width:100%; 
} 

、高いピクセルでその

.span_1_of_4 { 
width:50%; 
} 

、高いピクセルでその

.span_1_of_4 { 
width:33%; 
} 

であると言います

ほとんどの画像は500pxの高さに引き込まれています。いくつかは下にあり、ここにはいくつかあり、500px以上あります。

大きな画像が引き込まれると、記事（.span_1_of_4）が引き伸ばされ、レイアウト全体が壊れます。それはその下の要素を押し下げます。記事が500ピクセル以上になることを許さないCSSでコードする方法はありますか？画像のサイズが小さくても、レイアウトが分割されていなくても、レイアウトが分割されずに分割されている場合は、分割することができます。

おそらく非常に単純な質問ですが、それを理解しようとしている私の髪を引き出します。

max-width: 500px; 

をあなたの列に：

Answer 1

を追加してみてください。