背景尺寸：Contain，在缩放后获取尺寸

Question

背景尺寸：Contain，在缩放后获取尺寸

javascriptjqueryhtmlcss

7

在CSS中，我将一个按钮设置为100像素x 100像素，并设置背景大小：包含;

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

- Brandon

你在找window.getComputedStyle()吗？ - Teemu

我已经尝试使用$(imageElem).width()和$(imageElem).height()获取它，其中imageElem=$('imageButton')[0]；注意：imageElem是实际的dom元素而不是jquery元素的原因还有其他。 - Brandon

@Teemu，这将获取按钮的显示大小，为100px x 100px，我需要设置为按钮的图像大小#imageButton{ background: url("imageURL"); background-size: contain !important; } - Brandon

1

背景图像是一种伪元素，实际上您无法引用它。唯一的接口是给定的CSS。您可以尝试从document.images集合中获取背景图像。如果存在，则还可以获取一些属性（尽管我尚未测试此功能）。另外，您应该将您最后一条评论中编写的代码和说明添加到您的帖子中。这将显着改善问题。 - Teemu

刚刚在页面上检查了document.images库，由于图片是在加载后加载的，它们似乎不在其中（它们也显示在另一个域之外）。 - Brandon

http://jsfiddle.net/ 请。 - user2628521

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark S · Accepted Answer

CSS属性background-size: contain;会将图片缩放到最大，以使高度和宽度都适合内部，当然保持相同的纵横比。正如@Teemu所说，背景图像是一种伪元素，你实际上不能引用它。但我可以向您展示一个解决方法，如何获取真实的图像大小并计算缩放后的背景图像大小。它的工作原理就像比率和比例：真实图像的宽度与真实图像的高度之比等于调整大小后的图像宽度与调整大小后的图像高度之比。首先，我们需要获取图像的真实大小：

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() 函数时获取大小。

浏览器在子像素渲染方面也有所不同，我认为你需要四舍五入到最近的0.5小数以获得最准确的值 (43.7832 => 43.5)。使用: (Math.round(value * 2) / 2).toFixed(1) 就是这样！这里是示例fiddle。