CSS - 背景大小包含或正常

Question

我想找到一種方法來獲得div中包含的背景圖像，如果它大於div（background-size：contains;）並且圖像小於div ，保持它，因爲它是不拉伸和模糊它（背景大小：自動;）

有沒有什麼辦法做到這一點？我沒有從長遠來看，圖像的控制，因爲它是一個WordPress網站（所以圖像也必然發生變化，而不會由程序員通過）

Answer 1

window.onload = function() { 
 

 
    var imageSrc = document 
 
        .getElementsByClassName('foo') 
 
        .style 
 
         .backgroundImage 
 
         .replace(/url\((['"])?(.*?)\1\)/gi, '$2') 
 
         .split(',')[0]; 
 

 
    
 
    var divWidth = imageSrc.offsetWidth; 
 

 
    var image = new Image(); 
 
    image.src = imageSrc; 
 

 
    var width = image.width, 
 
     height = image.height; 
 

 
    alert('width =' + width + ', height = ' + height) 
 
    
 
    if (width > divWidth) { 
 
     
 
     imageSrc.style.backgroundSize = "contain"; 
 
     
 
    } 
 

 
}