次のように、画像のサイズを比例的に変更できます。
HTML:
<div style="height: 500px;">
<img src="http://placekitten.com/500/500">
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
}
ウィンドウのサイズを水平方向に縮小すると、画像は小さくなりますが、下に空白ができます。
できればCSSのみを使用するか、そうでない場合はできるだけ少ないJSを使用して、これが発生しないようにするにはどうすればよいですか?
よくわからない場合のアイデアを提供するために、このサイトで行われましたが、jquery プラグインを使用しています
とにかく、私はあなたの答えを楽しみにしています:)