javascript - Background Size : Contain, 缩放后得到Size

Question

在 CSS 中，我将按钮设置为 100px x 100px 并设置了背景大小:包含；

在 javascript 中，我将图像应用于我没有高度/宽度(也没有纵横比)的元素。

在 javascript 的另一个函数中，我需要能够在通过包含函数后获取此按钮的图像/背景的大小。

有什么办法可以做到这一点(我也可以访问 Jquery)

小样本:

<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 .