javascript, 크기가 포함 된 배경의 크기를 얻으십시오

Question

여기에 몇 가지 게시물을 보았습니다.이 질문에 답하기 위해 노력했지만 코드를 답변으로 사용해 보았지만 제대로 작동하지 못해서 틀린 일을하고 있어야합니다. 기본적으로 CSS 속성 "background-size : contains"가있는 배경 이미지가있는 div가 있습니다. 크기 조정 된 배경의 크기를 가져 오려고합니다. 몇 가지 내 사업부의 이름이 일치하도록 변경과 함께 여기에 대부분 여기에 다른 게시물에서 복사 내 코드는 다음과 같습니다

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); } 

을 자사의 스케일 없음 (원본을 얻을 수) 크기의 배경 이미지를 잘, 그래서 atleast 코드의 첫 번째 절반 작동하는지 알고 있습니다. 그러나 중요한 부분 인 두 번째 부분은 아무 것도하지 않는 것처럼 보입니다. 나는 새로운 변수로 테스트 div의 innerHTML을 변경하여 테스트했습니다 :

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

난 그렇게 나는 확실히 프로그래머에게 난 그냥 제대로 이해하지 못하는거야 아마 뭔가를 해요 자바 스크립트에 새로운 수학을 잘하지 않아요 이리.

편집 : 위의 코드는 조금 업데이트되어 좀 더 자세한 설명이 포함되어 있습니다.

그래서이 그림에서 파란색 상자는 배경 사업부를 포함하는 확장 DIV이다. 높이와 폭은 vh와 vw로 설정됩니다. 회색 상자는 크기가 포함되도록 설정된 배경 이미지 자체를 나타냅니다. 위의 업데이트 된 코드에서 newW와 newH는 크기가 어떻게 변경되는지에 관계없이 파란색 상자의 크기를 제공합니다. imgW와 imgH는 배경의 스케일되지 않은 원래 치수를 알려줍니다. 회색 상자의 크기를 조정하려면 scaledW 및 scaledH를 사용하고 싶지만 수학은 제대로 작동하지 않는 것 같습니다.

Answer 1

지금은 테스트 할 수 없지만 수정중인 변수 (newW 및 newH)는 값으로 전달됩니다. 따라서 실제로는 이미지 크기를 업데이트하지 않습니다. 이러한 변수를 사용하여 이미지의 크기를 업데이트해야 할 수도 있습니다. img.width = newW 등

Answer 2

내가 원하는 것을 얻는 간단한 방법을 찾아 냈습니다. 기본적으로 내가하려고했던 것은 그 안에 이미지가있는 div가 있었고 어떤 크기로도 확장 할 수 있었고 전체 이미지는 항상 div 안에 들어 있었고 (배경 크기의 속성과 비슷 함) 이미지는 항상 원래의 종횡비를 유지합니다. div가 아닌 내 경우에는 전체 윈도우의 크기가 더 커서 배경 대신 img 태그로 이미지를 사용하는 것이 더 쉬운 것으로 나타났습니다. Heres는 코드 :

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; 

} 

나는 기본적으로 그냥 스케일 없음의 높이와 이미지의 폭, 그리고 포함 사업부 (내 경우에는 윈도우)의 크기를 발견하고 높이에 걸쳐 폭의 자신의 비율을 발견했다. 저는 수학에 능숙하지는 않지만, 잘 풀려는 예제에서 이미지의 W/H가 윈도우의 W/H보다 큰 경우 이미지의 너비가 너비의 폭으로 정의된다는 것을 의미합니다. 창. 그리고 간단한 수학으로 정확한 이미지 높이를 찾을 수 있습니다.