1

可以编写 CSS 来拉伸容器的背景图像以适应容器。但是是否可以反过来，即编写使容器调整大小以适应背景图像的 CSS？

在过去，我使用 JQuery 使用了一个丑陋的 hack（我不满意，因为它取决于图像文件名中实际指定的图像尺寸）。所以我的强烈偏好是使用 CSS 来做到这一点，但如果那是不可能的，那么我也会对最干净的 Javascript/JQuery 解决方案感到满意。

（旁注：毫无疑问，这似乎是一件奇怪的事情。原因是我正在使用一个渲染引擎，它会根据某些设备参数吐出一个大小的图像。）

4

2 回答 2

1

元素不知道背景图像的尺寸。

您需要使用 JavaScript 来执行此操作。您可以将图像读入变量，然后检查那里的尺寸，然后将它们转移到容器中。

于 2012-05-14T18:50:53.010 回答
1

我认为仅使用 css 是不可能的，但我并不是说任何事情都是不可能的。我不确定你的用例是什么，但你可以在你设置背景的元素中嵌入一个 img 标签。将 img 标签的 src 设置为同一张图片将强制浏览器以相同的尺寸渲染父元素。

然后使用 css 可以隐藏元素，背景元素将呈现全尺寸。您还可以使用 jQuery 动态注入隐藏的 img 元素，并在包装​​元素上设置相同的背景图像。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div .img { visibility: hidden; }
        div { background: url(img.jpg) top left no-repeat; }
    </style>
</head>
<body>
    <div><img src="img.jpg" /></div>
</body>
</html>

这种方法的主要后果是 IE 和其他浏览器可能会下载图像两次。Chrome 足够聪明，可以避免这个问题。但我没有测试 FF、Safari 或 Opera。

于 2012-05-14T18:59:46.077 回答