CSS / Style / max-width

CSS / Style / width よりも優先的に働いて width のパラメータに対して制限をかけることができる。

このような設定がしてあった場合

#hoge{
    max-width: 600px;
    width: 90%;
}

この width は #hoge の親のサイズに依存するわけだがこれを考慮した結果 600px 以上になったとする。 だったとしても max-width の設定が効いて、600px 以上にはならないようになる。

img{
    display: block;
    max-width: 100%;
    width: 100%;
}

img に対してこのように設定すると特別な効果があって、この max-width は画像のオリジナルサイズを指すことになる。 解像度横 300px の画像があったとすると、このブロックの親が幅 1000px であっても 300px 以上にならないようになる。 つまり縮小だけして、拡大はしない、拡大することによる解像度不足のボケが発生しなくなる。