IE11でimg要素にmax-width: 100%;が効かない場合の対処法

他のブラウザやIE8でも動いているのに、IE11だけimg要素にmax-width: 100%;が効かない場合がありました。その時の対処法です。

今回遭遇したimg要素にmax-width: 100%;が効かなかったのは、img要素の親要素に display: table-cell;が指定されているケースでした。

table-layout: fixed;を指定する

max-width: 100%;を効くようにするためには、display: table-cell;が指定されている親要素はだいたいdisplay: table;だと思います。その要素にtable-layout: fixed;を指定するとmax-width: 100%;を効くようになります。

デモ

下記にtable-layout: fixed;を指定していない場合と指定している場合の例2つを掲載しています。IE11のみ再現しますので、IE11で確認してみてください。ひとつめの画像がmax-width: 100%;が効いていないのが分かります。

See the Pen max-width not working on IE11 by Minoru Hayakawa (@e-river) on CodePen.

一応下記にIE11で見た場合のキャプチャも掲載しておきます。

まとめ

IE11でmax-width: 100%;が効かない場合、display: table-cell;が指定されている場合には、table-layout: fixed;をさらに親要素に指定するとmax-width: 100%;が効くようになります。