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 IS JavaScript，但很多人认为它类似于另类... jQuery只是一种在许多情况下使JavaScript开发更舒适的方法（正如您在示例中可能已经注意到的那样）以上）。 ;）

根据窗口大小调整HTML格式的SVG图像大小

1 个答案: