menu
書いてる野郎
orebike@gmail.com
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 以上にならないようになる。 つまり縮小だけして、拡大はしない、拡大することによる解像度不足のボケが発生しなくなる。