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

Posted 2023-03-06

【中文标题】流体宽度表中的响应图像（最大宽度）

【英文标题】：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 像素。到目前为止一切顺利。

这是小提琴：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。

【问题讨论】：

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

【参考方案1】：

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

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

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

【讨论】：

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

这只适用于指定的宽度。问题是如何使用max-width 设置来实现这一点。父级必须是流体宽度。

【参考方案2】：

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

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

【讨论】：

感谢您的正确回答，但就我而言，这对我没有帮助。看看my demo。它在 webkit 中正常工作，但在其他地方没有。在其中包裹另一个元素 does not help.

我不情愿地接受这个答案，因为它是正确的。但是，它并没有解决问题。

约瑟夫，感谢您的接受。我希望我能解决您的问题，因为我通常不喜欢发布“无法完成”的回复——但经过一些研究并结合我自己的个人经历，我无法想出一个很好的解决你的问题。事实上，这让我很困惑。我期待听到任何比我能更好地解决这个问题的人的意见。