css - 流动宽度表格中的响应图像(最大宽度)

Question

考虑以下代码:

HTML:

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

CSS:

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

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

这是 fiddle :http://jsfiddle.net/PeAAb/

---

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

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

图像神奇地扩展到它的原始宽度，用它扩展 table。

这是 fiddle :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)不是 block 元素，而 max-width 仅适用于 block 元素。我对你的唯一建议是将表格元素包装在一个带有 display: block; 的 div 中。设置。

如果您有兴趣，这里是 fiddle :http://jsfiddle.net/PeAAb/4/