流体宽度表中的响应图像（最大宽度）

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/

---

问题：这是预期的行为吗？如果是这样，可以采取哪些措施来解决这个问题？

设置父级width（甚至是基于百分比的宽度）而非max-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仅适用于块元素。我唯一的建议是将table元素包装在一个带有display：block的div中;集。

如果你感兴趣的话，这是小提琴：http://jsfiddle.net/PeAAb/4/

Answer 2

我知道这已经很晚了，但是找到了答案，结果非常简单，非常简单，表格布局：固定。

在此处找到：http://blog.room34.com/archives/5042

无论如何，这是为了那些寻找这个难题答案的人。