Question

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

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

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

Answer 1

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

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

Answer 2

我认为只用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。

拉伸HTML容器以适合背景图像的大小

2 个答案: