親がdisplay: table-*;の時、子のimg {max-width: 100%; }が効かない

memo.md

img要素に対してのmax-widthが機能しない時があった

ためしたのが

• display: table-header-group;
• display: table-footer-group;
• display: table-cell;

だったのでtable-*としてる。

ちなみに答えはstackoverflowにあった。ここ http://blog.room34.com/archives/5042 にもあった。

display:table-cell;の親がdisplay: block;

jsFiddle

• Mac Safari6 :OK
• Mac Chrome v29: OK
• Mac Firefox v23: NG
• VM IE10,8 : NG

※OKは600pxの画像が300pxに縮小されてること

    <div class="container">
        <div>
            <img src="http://..." />
            <p>...</p>
        </div>
    </div>

.container {  width:300px; background: tomato;}
div { display: table-cell;width: 300px; }
div img { max-width: 100%; height: auto;}

display:table-cell;の親にdisplay:table;とtable-layout:fixed;を指定する

jsFiddle

• Mac Safari6 :OK
• Mac Chrome v29: OK
• Mac Firefox v23: OK
• VM IE10,8 : OK

※OKは600pxの画像が300pxに縮小されてること

    <div class="container">
        <div>
            <img src="http://..." />
            <p>...</p>
        </div>
    </div>

.container { display: table; table-layout: fixed; width:300px; background: tomato;}
div { display: table-cell;width: 300px; }
div img { max-width: 100%; }