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

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

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

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

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

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

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

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

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

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

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

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

ではまた!

ご注意

記事内容についてのご質問の受付は時間が取れませんので行っておりません。

使用しているパソコンの状態・状況や周辺機器の環境等もトラブルに関連している場合もあるので記事に書かれている内容を行う事で必ずトラブルが解消されるとは限りません。またこの記事を参考に作業される場合は自己責任でお願いします。作業された場合での損害や障害が発生しても当店は一切責任は負いませんのでご了承下さい。

この記事の内容は投稿日時点での内容です。時期によっては仕様などの変更により、この記事のとおりではない場合もございます。