Question

我想知道在使用Javascript使用css3的'background-size：cover'调整背景图像的大小后，是否可以确定背景图像的（新）尺寸。（不工作）示例：http://jsfiddle.net/daco/GygLJ/3/

干杯，

的Daco

Answer 1

我不知道足够纯粹的JS发布这个而不假设jQuery但它可以很容易移植。

你可以做的是找到背景图像的src，然后使用javascript的内置宽度/高度函数来获取它的尺寸。

例如：

    //jQuery
var imgSrc = $('#test').css('background-image');
//might need to do a bit of parsing on that, returns: url(http://blahblah)
alert(imgSrc);
imgSrc=imgSrc.replace('url("', '').replace('")', '');
alert(imgSrc);

var newImg = new Image();
newImg.onload=function()
{
    var h = newImg.height;
    var w = newImg.width;
    alert('w:'+w+' h:'+h);
};
newImg.src=imgSrc;

希望这有帮助

此处示例：http://jsfiddle.net/vap8p/

编辑：更新了源并链接到工作示例

Answer 2

假设ID为“mydiv”的元素的背景图像css。所有原生JavaScript。不会与页面上的其他JavaScript交互。

(function (id) {
    var img = new Image(), elm = document.getElementById(id);
    img.dataset.w = elm.offsetWidth;
    img.dataset.h = elm.offsetHeight;
    img.addEventListener('load', function () {
        var maxw = this.dataset.w,
            maxh = this.dataset.h,
            aspect = this.width / this.height;
        if(maxw > maxh * aspect) alert(maxw + ' x ' + maxw / aspect);
        else alert(maxh * aspect + ' x ' + maxh);
    }, false);
    img.src = window.getComputedStyle(elm).backgroundImage.slice(4, -1);
})('mydiv');

您可能想要向下舍入。

对于包含而不是封面，请将比较更改为相反的。

if(maxw < maxh * aspect) alert(maxw + ' x ' + maxw / aspect);

使用背景大小时是否可以测量生成的背景图像：使用Javascript覆盖？

2 个答案: