根据窗口大小调整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; }
}

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

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开发在许多情况下更加舒适的一种方法（如您在上面的示例中可能已经注意到的）。 ;）