横長画像をレスポンシブに対応してもバランス良く表示する方法

よくあるヘッダーの下にあるメイン画像

よくあるパターンとしてヘッダーの下にブラウザの横幅いっぱいに広げた画像を配置しているホームページを見かけると思います。

この画像をスマートフォン等の小さな画面でも表示するためにCSSで次の様に指定すると思います。

img{  width: 100%;  height: auto;}

これは常に横幅を親要素の幅いっぱいに表示させて、高さはそれに合わせて変更する。この指定をすれば画像の縦横比を保持しブラウザを縮小、拡大させても画像も拡大、縮小します。

それでは横幅を縮小してみましょう！

これは画像では伝わらないかもしれませんが、確かに縦横比が保持されているので縮小したらやたらに横長でバランスも悪く見栄も良くないです。できれば立幅もほしいですね！

これを次のようにCSSを変更します。

img{    width: 100%;    height: 250px;    vertical-align: bottom;    object-fit: cover;}

するとこのようになります。
人によって感じ方は違うかも知れませんが、私はこちらの方が見栄えは良いと思います。

height: 250px;の高さは任意です。この画像の実際の高さに合わせるとバランスが良いと思います。
vertical-align: bottom; は必須ではないですが、画像の下に余白ができる事があるので一応指定しておきます。

ではまた！