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

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

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

（旁注：。这无疑似乎是一个奇怪的事情想要做的原因是，我与吐出按照一定的设备参数大小的图像的渲染引擎工作）

来源

2012-05-14 McGarnagle

使用jquery并设置变量等于存储图像大小。然后使用一个CSS。运算符来改变宽度和高度的内容大小。 –

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

使用CSS你可以渲染该元素隐藏，并且背景元素将呈现完整大小。你也可以使用jQuery来动态注入一个隐藏的img元素，它在wrapper元素上设置了相同的背景图像。

<!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-14 18:59:46

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

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

来源

2012-05-14 18:50:53

如何建议从图像数据本身提取图像尺寸？您是否建议@dbaseman使用XMLHTTPRequest对象从服务器读取文件，然后解密图像的元信息？ –

不，只需使用：var tmp = new Image（）; tmp.onload = testfunction; tmp.src ='...'然后在testfunction中可以读取图像的大小 –

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

回答

相关问题