css - 流体幅テーブルのレスポンシブ画像（最大幅）

Question

次のコードについて考えてみます。

HTML：

<div>
    <img src="http://placehold.it/600x150" />
</div>

CSS：

div { max-width: 200px }
img { max-width: 100%  }

ネイティブサイズに関係なく、画像の幅が200pxを超えることはありません。ここまでは順調ですね。

これがフィドルです：http：//jsfiddle.net/PeAAb/

ただし、親要素が次のようにdisplay設定されている場合table：

div { max-width: 200px; display: table }

画像は魔法のように本来の幅に拡大し、tableそれとともに拡大します。

これがフィドルです：http：//jsfiddle.net/PeAAb/1/

同じことが実際のテーブルでも起こります：http：//jsfiddle.net/PeAAb/2/

質問：これは予想される動作ですか？もしそうなら、この問題を回避するために何ができるでしょうか？

正しく画像をボックスに押し戻す代わりに、親のwidth（パーセンテージベースの幅でさえ）設定することは解決策ではありません。max-width親は流動的である必要があります（サイトのメイン構造にこれを使用しているため、ソースのメインコンテンツの後にサイドバーのHTMLを表示できますが、サイドバーの幅は固定されています）。

score 7 · Accepted Answer

ここでの問題は、テーブル（またはテーブルのように動作するように設定されたdiv）がブロック要素ではなく、max-widthがブロック要素にのみ適用されることです。あなたへの私の唯一の提案は、display：blockを使用してテーブル要素をdivでラップすることです。セットする。

興味がある場合のフィドルは次のとおりです：http： //jsfiddle.net/PeAAb/4/

score -1 · Accepted Answer

私はこれがかなり遅いことを知っていますが、答えは非常に単純で非常に簡単で、テーブルのレイアウトが修正されていることがわかりました。

ここで見つかりました：http： //blog.room34.com/archives/5042

とにかく、これは私がそうであったようにこの難問への答えを探している人のためのものです。

2 に答える 2