我有图片和标题,我希望标题不比图片宽。 This jsfiddle显示了一个工作示例。
这里的基本技巧是
div.img{
overflow:hidden;
width:1px;
display:table;
}
似乎 display:table;
导致 div 拉伸(stretch)到图像宽度,即使宽度被指定为 1px。我使用它是因为图像宽度会有所不同,并且还可能会根据视口(viewport)宽度进行拉伸(stretch)。
到目前为止一切顺利。但是,在本地页面上,该技巧不起作用。 div
实际上显示为 1px 的宽度。奇怪的是,(看似)可比较的 div
确实显示了正确的行为。我不确定如何演示问题页面,因为它是一个包含相当多的 html/css 和图像的本地页面......如果可能的话,我会非常乐意提供屏幕截图或(大量)css帮助调试。
我没有立即看到 Firefox 控制台中正常运行和不正常运行的 div
之间的区别。有人知道要看什么吗?
最佳答案
有一个使用 CSS3 的解决方案:
div.img {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
关于css - div{显示:table;} doesn't stretch up div to fit image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21773325/