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

【问题标题】：Responsive images in a fluid-width table (max-width)流体宽度表中的响应图像（最大宽度）
【发布时间】：2012-08-06 02:31:48
【问题描述】：

考虑以下代码：

HTML：

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

CSS：

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

无论其原始尺寸如何，图像的宽度都不会超过 200 像素。到目前为止一切顺利。

但是，如果父元素的display 设置为table：

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

图像神奇地扩展至其原始宽度，同时扩展table。

实际表格也会发生同样的情况：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）。

【问题讨论】：

我正在尝试在 SharePoint 2010 中构建一些响应式的东西，它有一个非常讨厌的习惯，就是将嵌套表包裹在事物周围。如果您知道对此的解决方案（可以追溯到 IE8），我很想听听。 @pKs 的解决方案 (display:block;) 在 IE8/9 中失败:(

【解决方案1】：

我知道这已经很晚了，但找到了答案，结果非常简单且超级容易，表格布局：已修复。

无论如何，这是为那些像我一样寻找这个难题的答案的人准备的。

【讨论】：

【解决方案2】：

这里的问题是表格（或设置为像表格一样的 div）不是块元素，max-width 仅适用于块元素。我对你的唯一建议是将表格元素包装在一个带有 display: block; 的 div 中。设置。

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

【讨论】：

感谢您的正确回答，但就我而言，这对我没有帮助。看看my demo。它在 webkit 中正常工作，但在其他地方没有。在其中包裹另一个元素 does not help.
我不情愿地接受这个答案，因为它是正确的。但是，它并没有解决问题。
约瑟夫，感谢您的接受。我希望我能解决您的问题，因为我通常不喜欢发布“无法完成”的回复——但经过一些研究并结合我自己的个人经历，我无法想出一个很好的解决你的问题。事实上，这让我很困惑。我期待听到任何比我能更好地解决这个问题的人的意见。