[Web] CSSの設定で、画像が親要素からはみ出さないように設定する

今日はライトなネタです。
YoheiM.NETで困っていた点として、横幅のせまいブラウザやスマートフォンで閲覧した際に、 画像が記事部分からはみ出して、サイドバーの表示を邪魔するという問題がありました。
それを防ぐためのmax-widthというCSSを今日は紹介します☆

画像の最大幅を指定するCSS

YoheiM.NETで表示する画像の多くは、横幅=500pxで作成しています。 記事部分が500px未満だと、画像がはみ出していましたが、「max-width」というCSSを使うと、 記事の最大幅を指定することができます。

img {max-width : 100%;}

上記では、imgタグが属する親要素の横幅を画像の最大横幅としています。
そのため、親要素が400pxの場合には、画像横幅も400pxとなります。
上記CSSでは、画像のheightを指定していないため、横幅が変更された場合には、 画像の比率に合わせて、縦幅も自動的に変更されます。

なおmax-widthの対応ブラウザは、最近のFireFox, Chrome, Safari, Operaと、IE8以上であれば 使えるようです。

最後に

ちょっとしたCSSですが、小さな情報の積み重ねが大きな力につながるはず☆
デザインの技術的要素を今後も、もっと学んでいきたいと思います。
最後までお読み頂きまして、ありがとうございました！関連記事もよろしくお願いします。