时间戳

首页 > 解决方案 > 用于响应式设计的 SVG 图形

html - 用于响应式设计的 SVG 图形

问题描述

在此页面https://www.inagalaxyfarfarawry.com/sandboxmode/characters.php?mode=characterfocus&id=2上，我无法将 SVG 窗口设置为适当的大小。现在，我知道我可以在 CSS 或 HTML 中明确设置 SVG 的高度和宽度，但我有大约 25 张图像，它们都有不同的尺寸。所以我将宽度设置为 600 像素，并试图找到一种方法让 SVG 容器自动调整高度。但请注意，在链接中，SVG 具有相同的高度和宽度，在它包含的图像中截断了脚。有谁知道如何让图像自动调整高度？

我还需要它用于响应式设计，当窗口变得小于 650 像素宽时，图像会缩小到其尺寸的 75%，因此到 450 像素宽和 ###px 高。我很确定，如果有人有答案，我可以让它在响应式设计中工作，但为了以防万一需要调整，我想我会添加这个小细节。

我的 HTML 代码是这样的：

<svg id="hotspot_canvas" name="hotspot_canvas" class="hotspot" style="background-image: url('images/characters/fullbody/2.jpg');" viewbox="0 0 100 100">
</svg>

我的 CSS 是这样的：

body.characters svg { width: 600px; background-size: cover; }

我是否遗漏了某些东西或滥用了某些属性？我应该添加一个 preserveAspectRatio 属性吗？

感谢大家。

PS如果您转到页面，请不要介意元素内的圆圈。那是另一个故事了，但我想我已经弄清楚了。

标签： htmlcsssvg

解决方案

你可以通过下面的CSS来做到这一点，

body.characters svg {
        width: 600px;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
}

将背景大小从封面更改为“自动 100%”，您就完成了...

推荐阅读