css - 获取背景图像尺寸(未设置时)

Question

我需要获取背景图片的宽度和高度，我见过一些示例，其中只有在 CSS 中设置了属性才能轻松检索这些内容。

如果没有在 CSS 中内联或在 CSS 文件中设置宽度和高度，是否仍然可以获取宽度和高度？

这就是我要处理的所有...

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

谢谢!

Answer 1

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

然而，您可以做的是通过 Javascript 加载图像(因为您已经有了 url)，然后将您的元素设置为您想要的尺寸。例如，假设您的 HTML 文件包含一个 id 为“myimg”的 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 属性，并在需要时在其他地方使用它。