拉伸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容器以適應背景圖像的大小

回答

相關問題