Question

我需要获得背景图像的宽度和高度，我已经看过只有在CSS中设置属性才能轻松检索这些示例的示例。

无论是内联还是CSS文件都没有在CSS中设置宽度和高度，是否还有？

这就是我必须要做的所有......

element.style {
    background-image: url(generated-by-cms.jpg);
}

谢谢！

Answer 1

如果您没有设置该属性，我认为您无法通过CSS获取它。当外部加载图像时，CSS文件没有关于大小的线索。此外，如果您尝试通过背景图像进行设置，图像将受到元素大小的限制。

然而，你可以做的是通过Javascript加载图像（因为你已经有了url），然后将你的元素设置为你想要的尺寸。例如，假设您的HTML文件包含一个带有ID＆＃34; myimg＆＃34;

的img标记

<img id="myimg"></img> <!-- an empty image -->

然后您可以像这样设置您的Javascript：

var img = new Image(); // an empty image object
img.src = 'someurl';   // image url

// this is fired after 'someurl' is loaded.
img.onload = function() {
    document.getElementById('myimg').src    = img.src;
    document.getElementById('myimg').width  = img.width;
    document.getElementById('myimg').height = img.height;
}

请注意，如果您不想，则不必设置空图像或其属性。您可以操作img.width和img.height属性，并在需要时在其他地方使用它。

获取背景图像尺寸（未设置时）

1 个答案: