Размер фона: Содержите, получите размер после шкалы

Question

В CSS я установил кнопку 100px x 100px и имел размер фона: содержать;

В javascript Я применяю изображение к элементу, в котором у меня нет высоты/ширины (или соотношения сторон).

В другой функции в javascript мне нужно иметь возможность получить размер изображения/фона этой кнопки после того, как она прошла через функцию сохранения.

Есть ли способ сделать это (я имею доступ к Jquery а)

Small Sample:

<style> 
#imageButton{ 
    width: 100px; 
    height: 100px; 
    background: url("imageURL"); 
    background-size: contain !important; 
} 
</style> 
<script> 
    var imageElem = $('#imageButton')[0]; 
    console.log($(imageElem).width()); 
    //100px but need width of image after scaling 

</script> 

Answer 1

CSS свойство background-size: contain; масштабирует изображение к наибольшему так, что как высота и ширина будет вписываться внутрь, сохраняя при этом одинаковое соотношение сторон.

Как и @Teemu, фоновое изображение - это своего рода псевдоэлемент, который вы на самом деле не можете отнести. Но я могу показать вам обходное решение о том, как получить реальный размер изображения и вычислить масштабный размер фонового изображения.

Он работает как соотношение и пропорции, где:

real_image_width является real_image_height в resized_image_width является resized_image_height

Сначала мы должны получить реальный размер изображения:

var img = new Image; 
img.src = $('#imageButton').css('background-image').replace(/url\(|\)$/ig, ""); 
var imgW = img.width; 
var imgH = img.height; 

Затем сравните, какое измерение является самым крупным и рассчитать пропорцию:

var newW, newH; 

if(imgW > imgH){ 
    newW = $('#imageButton').width(); //100; 
    newH = imgH/imgW * newW; 
}else{ 
    newH = $('#imageButton').height(); //100 
    newW = imgW/imgH * newH;  
} 

console.log(newW+':'+newH); 

Если изображение еще не загружен или кэширования он будет возвращать размер 0, хороший способ, чтобы исправить это, чтобы получить размер когда изображение загружено с использованием функции .load().

Браузеры также отличаются субпиксельной визуализацией, я думаю, вам нужно округлить до ближайшего .5 десятичного числа, чтобы получить точное безопасное значение (43.7832 => 43.5). Использование: (Math.round(value * 2)/2).toFixed(1)

Это все! Вот пример fiddle.