親要素にdisplay:table-cellを指定したときにimg要素に対してのmax-widthが機能しないときに確認すべきことは

親要素にdisplay:table-cellを指定したときに、img要素に対してのmax-widthが機能しないときに確認すべきことはがあります。

CSS

.parent{table-layout:fixed; display: table; width: 100%;}/*この三つを確実に指定*/
.parent > div{display: table-cell; vertical-align: top; padding-right: 1em;}/*vertical-alignも忘れずに*/
.parent > div img{max-width: 100%;height: auto;}
/* ==== width === */
.width_01 {width: 10%;}
.width_02 {width: 20%;}
.width_03 {width: 30%;}
.width_04 {width: 40%;}
.width_05 {width: 50%;}
.width_06 {width: 60%;}
.width_07 {width: 70%;}
.width_08 {width: 78%;}
.width_09 {width: 90%;}
.width_10 {width: 100%;}

HTML

<div class="parent">
<div class="width_03"><img src="images/hoge.jpg" width="300" height="300"></div>
<div class="width_07">hogehogeな文章</p>
</div>
</div>

解説

親(.parent要素)にtable-layout、display、widthの3要素を必ず設定しないとFirefox、IEでmax-widthが効かない事例が確認されています。
特に忘れやすいのがwidth要素です。display: table を設定するとwidth要素がautoに変更されてしまうみたいです。つまづきやすいので覚えておきましょう。

Related articles