div{display:table;} 不会拉伸 div 以适应图像答案

【问题标题】：div{display:table;} doesn't stretch up div to fit imagediv{display:table;} 不会拉伸 div 以适应图像
【发布时间】：2014-03-13 10:59:25
【问题描述】：

我有图片和标题，我希望标题不比图片宽。 This jsfiddle 显示了一个工作示例。

这里的基本技巧是

div.img{
overflow:hidden;
width:1px;
display:table;
}

似乎display:table; 导致 div 拉伸到图像宽度，即使宽度被指定为 1px。我使用它是因为图像宽度会有所不同，并且可能会根据视口宽度进行拉伸。

到目前为止一切顺利。但是，在本地页面上，这个技巧不起作用。 div 确实显示为 1px 宽。奇怪的是，一个（看似）可比较的div确实显示了正确的行为。我不确定如何演示问题页面，因为它是一个包含很多 html/css 和图像的本地页面......如果可能的话，我会很高兴能提供屏幕截图或（大量）css帮助调试。

我没有立即看到 Firefox 控制台中的 divs 正常运行和非正常运行之间的区别。有人知道要看什么吗？

【问题讨论】：

附言。只要可以完全省略标题而不会破坏任何内容，也非常欢迎对图像标题宽度采用完全不同的方法。
一次尝试改用max-width..
发现问题：图片没有加载。浏览器显示的微小“图像”是仍然存在的图像边框，而图像本身不存在。没想到这可能是罪魁祸首，但无论如何：问题解决了:-)

标签： css image width

【解决方案1】：

有一个使用CSS3的解决方案：

div.img {
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}

Fiddle