More than 5 years have passed since last update.

max-widthのリセットはautoではなくinitialを使う

Posted at 2015-07-18

レスポンシブデザインなど、画像幅をリキッド(親の幅に準ずる)にするために下記のような設定をよくします。

img {
  max-width: 100%;
}

オーバーフローするdivに入れる場合など、個別に「ここは親の幅に関わらず固定幅で表示したい」「でもimgの幅は不確定」という時は initial を使ってリセットしないと元に戻りません。(initial はCSS3から使える設定値です。)

img {
  max-width: initial; /* 初期状態にリセット */
}

auto で行けそうな気がしてしまいますが、これは効かないので注意です。

img {
  max-width: auto; /* これは効かない */
}