HTML で画像タグを使用するときは、imgタグで幅と高さを指定して、画像が読み込まれる前でもブラウザーがスペースを確保できるようにします。要素は移動しません)。例えば：
<img width="600" height="400" src="..."/>
問題は、より「レスポンシブ」なバージョンを作成したいということです。「単一列のケース」の場合は、次のようにします。
<img style="max-width: 100%" src="..."/>
しかし、これを明示的に指定された幅と高さと組み合わせると、次のようになります。
<img style="max-width: 100%" width="600" height="400" src="..."/>
画像が使用可能なスペースよりも広い場合、画像は縦横比を無視してサイズ変更されます。これが発生する理由は理解しています (画像の高さを「固定」したため)。これを修正したいのですが、方法がわかりません。
max-width: 100%要約すると、指定できるようになり、画像が読み込まれたときにコンテンツがリフローされないようにしたいと考えています。