javascript – 背景大小：包含,获得规模后的大小

发布时间：2020-12-14 22:52:38 所属栏目：资源来源：网络整理

导读：在CSS中,我将按钮设置为100px x 100px并具有background-size：contains; 在javascript中,我将图像应用于我没有高度/宽度(也不是宽高比)的元素. 在javascript中的另一个函数中,我需要能够在通过contains函数后获得此按钮的图像/背景的大小. 有没有办法做到这

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

在javascript中,我将图像应用于我没有高度/宽度(也不是宽高比)的元素.

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

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

小样本：


最佳答案
CSS属性background-size：contains;将图像缩放到最大,以便高度和宽度都适合内部,当然保持相同的纵横比.
就像@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.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!