在可变宽度表格（最大宽度）中实现响应式图片

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出现在主内容后面，但边栏具有固定宽度）。

此外，将table-layout设置为fixed似乎在这里没有影响。

- Joseph Silber

---

我正在尝试在SharePoint 2010中构建一个响应式的东西，但它有一个非常讨厌的习惯，会将嵌套表格包裹在周围。如果您知道解决此问题的方法（适用于IE8），我很乐意听取。@pKs的解决方案（display:block;）在这里在IE8/9中失败了:( - Olly Hodgson

Answer 1

问题在于表格（或设置为表格行为的div）不是块级元素，max-width只适用于块级元素。我的建议是将表格元素包装在一个设置为display:block的div中。

如果您有兴趣，这里是相关的fiddle链接: http://jsfiddle.net/PeAAb/4/

- David Vasquez

---

感谢您的正确答案，但在我的情况下这并没有帮助我。请查看我的演示。它在webkit中可以正常工作，但在其他地方却不行。在其中包装另一个元素也没有帮助。 - Joseph Silber

我勉强接受这个答案，因为它是正确的。然而，它并没有解决问题。 - Joseph Silber

Joseph，感谢您的接受。我希望我能有一个解决方案来解决您的问题，因为我通常不喜欢发布“无法完成”的回复 - 但是经过一些研究和我的个人经验结合起来，我还没有能够想出一个好的解决方案来解决您的问题。事实上，这让我感到困惑了很多；我期待着听到任何比我更好地解决这个问题的人的意见。 - David Vasquez

Answer 2

我知道这可能有点晚了，但是我找到了答案，而且非常简单易懂，就是table-layout: fixed。

在这里找到的：http://blog.room34.com/archives/5042

总之，这是为那些像我一样正在寻找答案的人准备的。

- manonatelier

---

我将简要解释或解释一下文章，为什么在这里table-layout: fixed是一个答案，特别是因为OP说这对他没有用。 - Dan

这仅适用于指定宽度。问题是如何在设置了max-width的情况下实现此目标。父元素必须具有流体宽度。 - Joseph Silber