initialとautoでmin-width,max-width(height)をリセット

スタイルシートの、最大の幅や高さ、最小の幅や高さを指定する
max-width、max-height、min-width、min-height をリセットするときは
initialとautoを併用します。

アスペクト比(縦横比)を維持したまま200×200の枠内に収まるよう画像を縮小する設定と
それをリセットするスタイルのサンプルです。

.thumbnail img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
}
.free .thumbnail img {
	max-width: initial;
	max-width: auto;
	max-height: initial;
	max-height: auto;
}

initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです。
併記しているautoはinitialに対応していないInternetExplorerのための設定です。
(IE10でもinitial表記が効かなかった…IE遅れてる…)

そもそも、いったん設定したものをリセットしなきゃいけない構造にするなってはなしですが、
継ぎ足しながら運用されてきた1000行ちかいCSSを突貫で直さなければいけないときや、他のベンダーと同時進行でCSS構築しなければならないスケジュールのときなど
やむを得ないケースもでてくるので、こいつはmax、min系以外でも活躍しそう。

参考:
テキストをスタイルシート適用前の状態に戻す方法

関連記事

Pocket