Nhận kích thước cuối cùng của hình nền

Question

có cách nào dễ dàng để có được chiều cao và chiều rộng cuối cùng của hình nền với Javascript hoặc jQuery ngay cả khi áp dụng thuộc tính background-size?

Ý tôi là, tôi biết tôi có thể lấy url hình nền và tải nó vào đối tượng Image và sau đó lấy chiều rộng và chiều cao. Nhưng nó là kích thước của hình ảnh nguồn. Nếu ai đó chia tỷ lệ với CSS thì kích thước đã thay đổi

Làm cách nào để tìm kích thước cuối cùng?

@edit

nó là khác nhau từ các câu hỏi đánh dấu là tương tự bởi vì nó không nói như thế nào để có được kích thước bằng pixel nếu ai đó đã thay đổi background-size

Answer 1

Sử dụng JSFiddle Here, tôi thấy rằng việc thay đổi chiều cao hoặc chiều rộng của vùng chứa buộc hình ảnh được chia tỷ lệ thành chiều cao hoặc chiều rộng lớn nhất. Có nghĩa là việc đo một cạnh của nền sẽ bằng với một trong các kích thước của vùng chứa. Sử dụng điều này và một số tỷ lệ chúng ta có thể tính toán kích thước của hình ảnh.

// let .container represent element containing the image 
var image; // the image object to the background image 
var dim_h, dim_w; // the height and width of the actual image 


height = $(".container").height(); 
width = $(".container").width(); 

if (height >= width) 
{ 
    dim_h = height; 
    dim_w = (height/image.height) * image.width; 
} 
else 
{ 
    dim_w = width; 
    dim_h = (width/image.width) * image.height; 
} 

// dim_w and dim_h contain the width and height of the actual 
// background image after scaling 

Mã trên sử dụng tỷ lệ bên dưới để tính toán.

(element_height/image_height) == (element_width/image_width) 

Tôi nghĩ rằng nó sẽ cung cấp cho bạn câu trả lời mà bạn muốn.

Answer 2

Sử dụng getComputedStyle, tôi đã tạo tập lệnh này trả về chiều rộng và chiều cao của nền phần tử đã cho, tính bằng pixel. Nó hoạt động với:

• Kích thước (chiều rộng hoặc chiều cao) thiết lập để auto, hoặc rõ ràng hoặc vì không có giá trị cụ thể đã được đưa ra (chiều rộng và chiều cao mặc định để auto)
• Kích thước thiết lập để tỷ lệ %
• Kích thước đặt thành pixel px
• Thứ nguyên được đặt thành kết hợp của bất kỳ trước nào. (tứcwidth: 100px; height: autohoặcwidth: auto; height: 32.4%hoặcheight: 100px; width: 2% hoặc width: 21.2%)
• background-size thiết lập để cover hoặc contain

Nó hoạt động nếu background-size được thiết lập với một bên ngoài tập tin CSS, inline CSS, CSS tiêu đề nội tuyến hoặc nếu không được đặt ở tất cả (có nghĩa là chiều rộng và chiều cao là auto).

Dưới đây là một JsFiddle (bọc dụ)

http://jsfiddle.net/gp4e9d3z/3/

Và đây là đoạn mã StackOverflow (với percentage auto đơn vị)

function getBackgroundSize(elem) { 
 
    // This: 
 
    //  * Gets elem computed styles: 
 
    //    - CSS background-size 
 
    //    - element's width and height 
 
    //  * Extracts background URL 
 
    var computedStyle = getComputedStyle(elem), 
 
     image = new Image(), 
 
     src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2'), 
 
     cssSize = computedStyle.backgroundSize, 
 
     elemW = parseInt(computedStyle.width.replace('px', ''), 10), 
 
     elemH = parseInt(computedStyle.height.replace('px', ''), 10), 
 
     elemDim = [elemW, elemH], 
 
     computedDim = [], 
 
     ratio; 
 
    // Load the image with the extracted URL. 
 
    // Should be in cache already. 
 
    image.src = src; 
 
    // Determine the 'ratio' 
 
    ratio = image.width > image.height ? image.width/image.height : image.height/image.width; 
 
    // Split background-size properties into array 
 
    cssSize = cssSize.split(' '); 
 
    // First property is width. It is always set to something. 
 
    computedDim[0] = cssSize[0]; 
 
    // If height not set, set it to auto 
 
    computedDim[1] = cssSize.length > 1 ? cssSize[1] : 'auto'; 
 
    if(cssSize[0] === 'cover') { 
 
     // Width is greater than height 
 
     if(elemDim[0] > elemDim[1]) { 
 
      // Elem's ratio greater than or equal to img ratio 
 
      if(elemDim[0]/elemDim[1] >= ratio) { 
 
       computedDim[0] = elemDim[0]; 
 
       computedDim[1] = 'auto'; 
 
      } else { 
 
       computedDim[0] = 'auto'; 
 
       computedDim[1] = elemDim[1]; 
 
      } 
 
     } else { 
 
      computedDim[0] = 'auto'; 
 
      computedDim[1] = elemDim[1]; 
 
     } 
 
    } else if(cssSize[0] === 'contain') { 
 
     // Width is less than height 
 
     if(elemDim[0] < elemDim[1]) { 
 
      computedDim[0] = elemDim[0]; 
 
      computedDim[1] = 'auto'; 
 
     } else { 
 
      // elem's ratio is greater than or equal to img ratio 
 
      if(elemDim[0]/elemDim[1] >= ratio) { 
 
       computedDim[0] = 'auto'; 
 
       computedDim[1] = elemDim[1]; 
 
      } else { 
 
       computedDim[1] = 'auto'; 
 
       computedDim[0] = elemDim[0]; 
 
      } 
 
     } 
 
    } else { 
 
     // If not 'cover' or 'contain', loop through the values 
 
     for(var i = cssSize.length; i--;) { 
 
      // Check if values are in pixels or in percentage 
 
      if (cssSize[i].indexOf('px') > -1) { 
 
       // If in pixels, just remove the 'px' to get the value 
 
       computedDim[i] = cssSize[i].replace('px', ''); 
 
      } else if (cssSize[i].indexOf('%') > -1) { 
 
       // If percentage, get percentage of elem's dimension 
 
       // and assign it to the computed dimension 
 
       computedDim[i] = elemDim[i] * (cssSize[i].replace('%', '')/100); 
 
      } 
 
     } 
 
    } 
 
    // If both values are set to auto, return image's 
 
    // original width and height 
 
    if(computedDim[0] === 'auto' && computedDim[1] === 'auto') { 
 
     computedDim[0] = image.width; 
 
     computedDim[1] = image.height; 
 
    } else { 
 
     // Depending on whether width or height is auto, 
 
     // calculate the value in pixels of auto. 
 
     // ratio in here is just getting proportions. 
 
     ratio = computedDim[0] === 'auto' ? image.height/computedDim[1] : image.width/computedDim[0]; 
 
     computedDim[0] = computedDim[0] === 'auto' ? image.width/ratio : computedDim[0]; 
 
     computedDim[1] = computedDim[1] === 'auto' ? image.height/ratio : computedDim[1]; 
 
    } 
 
    // Finally, return an object with the width and height of the 
 
    // background image. 
 
    return { 
 
     width: computedDim[0], 
 
     height: computedDim[1] 
 
    }; 
 
} 
 

 
// Stuff for debugging 
 

 
function updateData() { 
 
    var background = getBackgroundSize(document.body); 
 
    document.getElementById('width').innerHTML = background.width + 'px'; 
 
    document.getElementById('height').innerHTML = background.height + 'px'; 
 
    document.getElementById('winWidth').innerHTML = getComputedStyle(document.body).width; 
 
    document.getElementById('winHeight').innerHTML = getComputedStyle(document.body).height; 
 
} 
 
// Execute onload, so that the background image is already loaded. 
 
window.onload = window.onresize = updateData;

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url('http://hdwallpapersfit.com/wp-content/uploads/2015/03/images-7.jpg'); 
 
    background-size: 80% auto; 
 
} 
 
div { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #fff; 
 
}

<div id="data"> 
 
    Background width: <span id="width"></span> 
 
    <br> 
 
    Background height: <span id="height"></span> 
 
    <hr> 
 
    Body width: <span id="winWidth"></span> 
 
    <br> 
 
    Body height: <span id="winHeight"></span> 
 
</div>