gpt4 book ai didi

html - 拉伸(stretch) HTML 容器以适合背景图像的大小

转载 作者:行者123 更新时间:2023-11-28 13:33:47 24 4
gpt4 key购买 nike

可以编写 CSS 来拉伸(stretch)容器的背景图像以适合容器。但是有没有可能做相反的事情,即编写使容器调整大小以适应背景图像的 CSS?

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

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

最佳答案

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

然后使用 css 可以隐藏元素,背景元素将呈现全尺寸。您还可以使用 jQuery 动态注入(inject)一个隐藏的 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 - 拉伸(stretch) HTML 容器以适合背景图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10589252/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com