親要素に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に変更されてしまうみたいです。つまづきやすいので覚えておきましょう。