応答画像（最大幅）

Question

は、次のコードを検討：

HTML：

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

CSS：

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

そのネイティブサイズに関係なく、イメージは決して200ピクセルより大きくなりません。ここまでは順調ですね。ここで

はフィドルです：親要素がある場合は、しかし、 http://jsfiddle.net/PeAAb/

---

そのdisplayセットtableへ：

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

画像は魔法のようにtableを拡大し、そのネイティブ幅に拡張。ここで

はフィドルです：http://jsfiddle.net/PeAAb/1/

---

同じことが、実際のテーブルで発生します：http://jsfiddle.net/PeAAb/2/

---

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

max-widthの代わりに親のwidth（パーセンテージベースの幅さえも）を設定すると、イメージが正しくボックスに収められますが、解決策ではありません。親が流動的であることが必要です（私はthe sidebar HTML appear after the main content in the source, but with the sidebar being fixed widthを持つことができるように、これをサイトの主要な構造に使用しています）。

また、setting table-layout to fixedはno effectと思われます。

Answer 1

ここでの問題は、表（または表のように動作するdiv）がブロック要素ではなく、max-widthがブロック要素にのみ適用されるという点です。私の唯一の提案は、display：blockを使ってdiv内のtable要素をラップすることです。セット。 http://jsfiddle.net/PeAAb/4/

Answer 2

私はこれはかなり遅れている知っているが、非常にシンプルかつ超簡単であることが判明した答えは、テーブルレイアウトが見つかりました：固定

は、ここであなたが興味を持っている場合にはフィドルです。

はこちらをご覧ください：http://blog.room34.com/archives/5042

とにかく、これは私があったように、この難問に答えをお探しの方のためです。