Html 如何制作<；svg>；总是符合形象

（编辑） 我正在尝试制作一个显示图像的网页，根据纵横比的不同，它应该占据页面宽度的50%，或者占据页面高度的80%。我希望始终显示完整的图像而不失真，并且我需要周围的svg与内部图像大小相同。该网页将允许用户绘制图像并保存其更改。这必须是动态的，这样任何图像都可以工作

这是我现在掌握的代码。我希望它在不改变纵横比的情况下将图像缩放到页面宽度的50%，并扩展svg以适应图像。但是，svg的高度与图像的高度不匹配

html:

---

在我获得与图像高度匹配的div高度后，如何设置最大高度而不切断图像的一部分？

我认为您不能根据子图像元素的大小调整父元素，但您可以设置

overflow:auto;
display: table;

以正确显示子图像元素

CSS:

---

什么是

image

tag？可能是

img

？

mydiv

这是类。

not
图像标记是SVG元素。解析html时，它与标记同义。我认为您不能将
标记用作
标记的直接子项。它是
svg
的一部分。你更新了你的代码，现在你在css中瞄准了一个
id
，但是你已经设置了一个
类
。它就快到了！现在，完整的图像显示，唯一的问题是图像现在将与页面上的其他元素重叠。添加边距并不能防止项目重叠。有没有办法解决这个问题？你可以用标签代替标签吗。那工作就容易多了。不，但我刚刚意识到重叠的问题来自我的一个按钮的样式。。。所以这个解决方案实际上是完全有效的！
#svg {
    width: 50%;
    height: fit-content;
}

#svg image {
    width: 100%;
    height: auto;
}

overflow:auto;
display: table;

#svg {
    width: 50%;
    display: table;
    overflow: auto;
}