よもやまチョモランマ

レスポンシブデザインにおける画像について

すっごく初歩的なことなんだけど「あ~なるほど、そういうことか~」てなったから、記録しておく。

結論から言いますと
モバイルファーストなレスポンシブサイトを作るなら
1. 画像は大きいサイズで用意しよう
2. imgには「max-width:100%;」をあてよう

です。

今回、改造しているサイトにやたら画像幅を指定するCSSが多くてですね。
うんざりしたので、全部とっぱらってみたんですよ。
そしたら「pagetop」や「見出し代わりに使っていた文字」など、画面幅より小さい画像がのきなみ拡大されてしまいました。
それを解決しようとすると、今度は寸足らずの写真が・・・

なんじゃこりゃー!

4年前、このサイトを作った時は、まだ「PCファースト」でした。
横並びにする画像などは小さくても良かったんです。
ここから「スマホになったら、float解除して~、写真が幅いっぱいになればいいか~」というレスポンシブになります。
imgには「width:100%;」があてられました。
それによって、つられて拡大されてしまう部分に、ひとつずつ「max-width:100px;」などのCSSをあてていったんでしょうね。

4年前のわたし・・・、ご苦労さん!

時代は「モバイルファースト」
スマホで見たとき、画像は幅いっぱいに表示されるのがデフォルト。
ここから「PCになったら、横並びになればいいか~、flexでいいや~」というレスポンシブになります。

じ・・・、時代を感じる・・・!

画像にあてるべきCSS「max-width:100%;」は
「基本は原寸サイズで表示しますよ~
 デバイス幅が画像より小さくなったら、はみ出さないよう合わせますよ~」
というもの。

小さい画像は、小さいまま表示されます。拡大されません。
幅いっぱいに表示したい画像は、大きめに用意しておくことで、常に幅100%におさまります。

気が利いてるよね。
最初からこれにすればいいんですよ。
でも、4年前は、小さい画像ありきだったんですよ(遠い目)

もう絶対、小さい画像は使わないぞ~