javascript - 根据窗口大小调整 HTML 中的 SVG 图像大小

Question

我的项目有一个徽标，希望将其放置在网页顶部。徽标为 SVG 格式，默认大小为 1280x256 像素。我希望在更改窗口大小时调整此图像的大小。我怎样才能做到这一点？我需要 jQuery 还是可以用简单的 JavaScript 来完成？

Answer 1

实际上有很多方法可以实现这一目标。选择哪一个取决于你想要什么样的行为。一些例子（假设你img有 ID image）：

1. CSS 使用相对大小：

#image { width: 10%; }

图像始终为屏幕宽度的 10%，并且会自动调整。

2. CSS 使用媒体查询：

#image { width: 100px; }
@media (min-width: 600px) {
    #image { width: 300px; }
}

如果屏幕宽于 600px，则图像为 300px 宽，否则为 100px 宽。宽度会自动调整，但会“跳转”到它的新值。

3. jQuery：

$(window).resize(function(){
    var w = $(window).width();
    $("#image").width(w * 0.1);
});

这等效于示例 #1。请注意，您可以根据需要在 JS 中进行自己的计算，因此此解决方案比 CSS 更灵活（但可能会使调整大小变慢）。#4 也是如此。

4.纯JavaScript：

window.onresize = function(event) {
    var w = 0;
    if (window.innerWidth != null) {
        w = window.innerWidth;
    }
    else if (document.body != null) {
        w = document.body.clientWidth;
    }
    document.getElementById("image").style.width = (w >= 600) ? 300 : 100;
};

这等效于示例 #2。

此外，jQuery是JavaScript，但很多人认为它是一种替代方案……jQuery 只是一种让 JavaScript 开发在许多情况下更加舒适的方式（正如您可能在上面的示例中注意到的那样）。;)