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

Resizing SVG images in HTML according to window size

本文关键字：图像 SVG 窗口大小 调整 HTML      更新时间：2023-09-26

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

实际上有很多方法可以实现这一点。选择哪一个取决于你想要什么行为。一些示例（假设您的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. j查询：

$(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开发在许多情况下更加舒适的方法（正如你可能在上面的例子中注意到的那样）。;)

相关文章：