横一面に画像を配置するCSS。違いをまとめてみました。

WEBサイトのコーティングするときに横幅一杯で画像を配置したい場合。
シンプルにwidth:100%とかでもいいのですが、background-size使ってする方法もあります。

ではそれぞれどう違うのか？
違いをまとめてみました。

横幅一杯に画像を配置する場合のコーティング方法

まずCSSとHTMLだけでするのであれば
・imgを配置して、そのimgのスタイルに横幅を指定する。
・background-imageとsizeで指定する。

画像配置







空要素で背景を指定。

配置する画像がこちら。
わかりやすく同じHTMLに指定して書いてみました。
→デモページ




デモページみてあれ？と思った方、おそらくディスプレイサイズの解像度が1920ではない可能性が高いです。

実はbackground-sizeで指定する場合、空要素であればheightを指定しないと表示されません。



1920のディスプレイでみると同じように表示されるわけですが、違うディスプレイサイズだとそうはいかないというのがデメリットですね。

上が解像度が高い場合を想定。するとwidth:100%ならしっかり表示されるのに、backgroundの場合はheightのpx指定なので途中で切れてしまいます。



width:100%がシンプルにつかえて良さそうですが、レスポンシブデザインにする場合は画像が小さくなる可能性があります。



こんな感じ。


その場合はviewpointの切り替え時で違う画像をPC用のimgの下に配置してあげればOK。
モバイル時にdisplay:blockで表示させてPC用の画像をnoneにすればスマートフォンでも綺麗に表示されます。

今回は横一面でこのように表示しましたが、javascript使ったりすればまた違った方法で画像を設置することなくうまくできるかもしれません。

もし「こういう方法あるよー！」という方はご連絡いただけると幸いです。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。