背景尺寸：包含，获得尺寸后的尺寸 [英] Background Size: Contain, get Size after scale

问题描述

在CSS中，我将一个按钮设置为100px x 100px，并具有background-size：contains;

在javascript中，我将图像应用于我所做的元素不具有高度/宽度（也不是长宽比）。

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

有任何方法可以做到这一点（我也可以访问Jquery）

小示例：

 < style> 
 #imageButton {
 width：100px; 
 height：100px; 
 background：url（imageURL）; 
 background-size：contains！important; 
} 
< / style> 
< script> 
 var imageElem = $（'＃imageButton'）[0]; 
 console.log（$（imageElem）.width（））; 
 // 100px但需要缩放后的图像宽度
 
< / script> 
  

解决方案

CSS属性 background-size ：contains; 将图像缩放到最大，以便高度和宽度都适合内部，保持相同的高宽比。

就像@Teemu所说，背景图片是一个有点伪元素，你实际上不能参考。但我可以告诉你一个解决方法，如何获得真实的图像尺寸和计算缩放的背景图像大小。

它的工作原理比例和比例其中：

resized_image_width 指向 resized_image_height 的 real_image_height / p>

首先，我们需要获得图像的真实大小：

  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） 
 
 
 
以下是示例小提琴。
 
In CSS I set a button to be 100px x 100px and have the background-size: contain;

In javascript I apply an image to the element that I do not have the Height/width of (nor aspect ratio) . 

In another function in javascript I need to be able to get the size of the image/background of this button after it has passed through the contain function.

Is there any way to do this (I have access to Jquery as well)

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>

解决方案
CSS property background-size: contain; scales the image to the largest so that both the height and width will fit inside, retaining the same aspect ratio of course.

Just like @Teemu said, A background image is a kinda pseudo element which you actually can't refer. But I can show you a workaround on how to get the real image size and compute the scaled background-image size.

It works like ratio and proportion where: 

real_image_width is to real_image_height as resized_image_width is to resized_image_height

First we need to get the real size of the image:
var img = new Image;
img.src = $('#imageButton').css('background-image').replace(/url\(|\)$/ig, "");
var imgW = img.width;
var imgH = img.height;
Then, compare which dimension is the largest and calculate the proportion:
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);
If the image is not yet loaded or cached it will return a size of 0, a good way to fix this is to get the size when the image is has been loaded using .load() function.

Browsers also differ in sub-pixel rendering, I think you need to round off to nearest .5 decimal to get the exact safest value (43.7832 => 43.5). Using: (Math.round(value * 2) / 2).toFixed(1)

That's it! Here is the sample fiddle.

                        
这篇关于背景尺寸：包含，获得尺寸后的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！