文章/答案/技术大牛

发布

社区首页 >问答首页 >拉伸HTML容器以适应背景图像的大小

问拉伸HTML容器以适应背景图像的大小
EN

Stack Overflow用户

提问于 2012-05-15 02:46:41

回答 2查看 3.4K关注 0票数 1

可以编写CSS来拉伸容器的背景图像以适应容器。但是，有没有可能做相反的事情，也就是编写CSS，使容器调整大小以适应背景图像？

在过去，我使用了一个使用JQuery的丑陋的方法(我对此并不满意，因为它依赖于在图像的文件名中实际指定的图像的尺寸)。因此，我强烈倾向于使用CSS来实现这一点，但如果这是不可能的，那么我也会对最干净的Javascript/JQuery解决方案感到满意。

(附注:这无疑是一件奇怪的事情。原因是我正在使用一个渲染引擎，它会根据特定的设备参数输出大小不同的图像。)

html

css

layout

background-image

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-05-15 02:59:46

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

票数 1

Stack Overflow用户

发布于 2012-05-15 02:50:53

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

你需要用JavaScript来做这件事。您可以将图像读取到一个变量中，然后检查其中的尺寸，并将其传输到容器中。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10589252

复制

相似问题

问拉伸HTML容器以适应背景图像的大小
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问拉伸HTML容器以适应背景图像的大小EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问拉伸HTML容器以适应背景图像的大小
EN