css - div内でスケーリング

Question

固定幅と高さ (400x300px) で div をラッピングしています。独自の幅/高さ (横 800x600px) または (縦 600x800px) を持つ の内部では、画像のサイズが異なる場合があります。幅または高さのどちらか早い方に収まるように両方を比例的に縮小できるように、CSS で拡大縮小するにはどうすればよいですか?

コードは次のとおりです。

<div style="width:400px; height:300px;">
    <img style="width:auto; height:auto;" src="image url>" />
</div>

ありがとう

Answer 1

max-width と max-height を使用します。

img {
    max-width: 400px; 
    max-height: 300px;
}

Answer 2

.your-image {
  max-width: 100%;
  max-height: 100%;
}

デモを参照してください。