パソコン画像
WordPress・ホームページ

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

CSSの画像

本日はパソコン初期設定とデータやその他設定を行い納品してきました。
結構ハイスペックパソコンです。
アドビのイラストレーターを学校の授業で習うために購入したそうです。

今回はこの作業の紹介ではなく、以前ホームページで引っかかった横長画像のレスポンシブ対応の設定方法を記事にします。
引っかかったと言っていますが、多分わかっている方からすれば、そんな事も知らんのかいなと言われそうですが、以前は本などで調べてもネットでググってみてもなかなかわからなかったのは事実です。
結局、勉強のために購入した本に付いていたサンプルホームページを調べて対応しました。

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

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

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

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

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

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

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

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

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

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

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

ではまた!