javascript，獲取包含屬性的縮放背景的大小

我已經在這裏看到了幾個帖子，試圖回答這個問題，我嘗試使用給出的代碼作爲答案，但一直未能得到它的工作，所以我必須做錯事。基本上我有一個背景圖像與CSS屬性「background-size：contains」的div。我想獲得縮放背景的尺寸。這裏是我的代碼，大多是從這裏另一篇文章複製，一些事情發生了變化，以配合我div的名字：javascript，獲取包含屬性的縮放背景的大小

var elem = document.querySelector("#enlarged-inner .image-bg");

功能getBackgroundSize（ELEM）{

elem = document.querySelector("#enlarged-inner .image-bg"); 

//get original background size 

var computedStyle = getComputedStyle(elem); 
var img = new Image; 
img.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2'); 
var imgW = parseInt(img.width, 10); 
var imgH = parseInt(img.height, 10); 

//get scaled size 

var newW = parseInt(computedStyle.width, 10); 
var newH = parseInt(computedStyle.height, 10); 
var scaledW = 0; 
var scaledH = 0; 

    scaledW = imgW/imgH * newH; 
    scaledH = imgH/imgW * newW; 

} 

window.onresize = function(){ getBackgroundSize(elem); }

它能夠獲得原始（未縮放）大小的背景圖像就好了，所以我至少知道前半部分代碼正在工作。但第二部分，重要的一部分，似乎沒有做任何事情。我一直在改變測試的div innerHTML來的新變量測試它：

document.getElementById("test").innerHTML = newW + " , " + newH;

我是新來的JavaScript和數學不是很大，所以我敢肯定，那裏有可能是一些我只是沒有正確理解這裏。

編輯：上面的代碼已經更新了一點，繼承人一些更多的解釋。

所以在這張照片的藍色方塊是包含與背景的DIV一個可擴展的股利。它的高度和寬度用vh和vw設置。灰色框表示背景圖像本身，其大小設置爲包含。在上面的更新代碼中，newW和newH給了我藍色框的尺寸，不管它如何縮放。 imgW和imgH給我背景的原始未縮放尺寸。我想scaledW和scaledH返回灰色框的縮放大小，但我的數學似乎沒有工作。

來源

2016-10-10 r1k

我現在不能測試它，但我認爲你正在修改的變量（newW和newH）是按值傳遞的。所以，你實際上不會更新你的圖像的大小。你可能需要使用這些變量來更新你的圖像的大小，也許用： img.width = newW等

來源

2016-10-10 15:23:05 Barudar

問題是newH和newW實際上並不計算縮放的高度和寬度。他們只是返回原始的，未縮放的大小的背景。 – r1k

如果用瀏覽器的控制檯調試你的代碼，你輸入你的getBackgroundSize函數嗎？ – Barudar

我想出了一個更簡單的方法來實現我想要的。基本上我試圖做的是有一個帶有圖像的div，我可以縮放到任意大小，並且整個圖像始終適合div（類似於background-size包含屬性），並且圖像會始終保持其原始高寬比。在我的特殊情況下，而不是div，它是整個窗口的大小，我發現它更容易處理img標籤中的圖像而不是背景。繼承人的代碼：

function getBackgroundSize(elem) { 

elem = document.querySelector("#enlarged-inner img"); 

var imgW = elem.naturalWidth; 
var imgH = elem.naturalHeight; 
var newW = window.innerWidth; 
var newH = window.innerHeight; 

var imgRatio = imgW/imgH; 
var newRatio = newW/newH; 

var scaledW = 0; 
var scaledH = 0; 

if (imgRatio > newRatio) { 
    scaledW = newW; 
    scaledH = imgH * newW/imgW; } 
else { 
    scaledW = imgW * newH/imgH; 
    scaledH = newH; } 

document.querySelector("#enlarged-inner img").style.width = scaledW; 
document.querySelector("#enlarged-inner img").style.height = scaledH; 

}

我基本上剛發現的未縮放高度和圖像的寬度，和內含div（在我的情況下，窗口）的尺寸，然後發現它們的寬度的比率超過高度。我不擅長數學，但至少在我試圖解決的例子中，如果圖像的W/H大於窗口的W/H，則意味着圖像的寬度將由寬度窗戶。然後用一些簡單的數學就可以找到圖像的正確高度。

來源

2016-10-11 18:16:09 r1k

javascript，獲取包含屬性的縮放背景的大小

回答

相關問題