Question

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

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

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

有没有办法做到这一点（我也可以访问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 =＆gt; 43.5 ）。使用：(Math.round(value * 2) / 2).toFixed(1)

就是这样！以下是示例fiddle。

背景大小：包含，获得规模后的大小

1 个答案: