「max-width:100%;」と「width : 100%;」の違い

max-width:100%;

原寸画像サイズまで拡大

例.画像サイズが100pxの場合
・div枠が200pxだったとしても、100pxまでしか表示しない
※あくまでも最大表示サイズは、原寸。決して拡大表示されることはない

---

width:100%;

原寸画像サイズ以上に拡大

例.画像サイズが100pxの場合
・div枠が200pxだったとしたら、200pxまで拡大表示される

※確認ブラウザは、Firefox10.0。他ブラウザだとまた挙動が異なるかもしれない

ところで、今、書いてから気付いたんだけど、分からないのは、「max-width:auto;」と「width:auto;」の違いであって、「max-width:100%;」と「width : 100%;」の違いではなかった。まあ、でも、こっちもあんまり分かってなかったので、このエントリーは消さずに残しとこー

結論

imgタグへ指定したクラスへ下記CSSを指定
※下記例ではimgタグへ指定している

img {

    max-width: 100%;

    height: auto;

}

---

考え方

1.画像横幅
・可能な限り原寸表示
・スマホ横幅サイズに合わせて自動縮小

2.画像高さ
・上記1で設定した横幅に合わせて(同じ縦横比率で)、高さを表示

---

ありがちな間違い

img {

    max-width: 100%;

    max-height: 100%;

}

img {

    max-width: auto;

    max-height: auto;

}