歪みなくブラウザ ウィンドウに合わせて画像のサイズを変更する

ブラウザ ウィンドウに合わせて画像のサイズを変更することは、一見単純な解決策のように見える一般的なタスクです。ただし、比率を維持したりトリミングを回避したりするなど、特定の要件に従うと、課題が生じる可能性があります。

スクロールバーと Javascript を使用しないソリューション (CSS のみ)

このソリューションは CSS グリッドを使用して、画像コンテナがウィンドウの高さ全体を占めるようにします。次に、画像はそのコンテナ内に水平方向と垂直方向に収まるように設定され、アスペクト比が維持され、スクロールバーの追加が回避されます。

JQuery による解決策

JavaScript が使用可能な場合、別のアプローチは次のとおりです:

ここでは、ボディの高さがウィンドウの高さと一致するように設定されており、画像の max-height プロパティが正しく機能することが保証されています。ウィンドウ サイズ変更イベントも処理され、ウィンドウのサイズが変更されたときに本体の高さと画像サイズが自動的に調整されます。