如何使 <svg> 始终适合图像答案

【问题标题】：How to make <svg> always fit an image如何使 <svg> 始终适合图像
【发布时间】：2021-07-23 04:16:44
【问题描述】：

（已编辑）我正在尝试制作一个显示图像的网页，该图像应填充页面宽度的 50% 或页面高度的 80%，具体取决于纵横比。我想始终显示完整图像而没有任何失真，并且我需要周围的 svg 与内部图像的大小相同。该网页将允许用户在图像上绘图并保存他们的更改。这必须是动态的，这样任何图像都可以工作。

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

html:

<svg id="svg">
    <image href="data:image/png;base64,{{ my_image }}"/>
</svg>

css:

#svg {
    width: 50%;
    height: fit-content;
}

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

在我得到div的高度以匹配图像的高度后，如何在不切断部分图像的情况下设置最大高度？

【问题讨论】：

image 标签是什么？也许img？ my-div 这是课堂。
<img 和 src 不是 <image 和 href。
图片标签是一个 SVG 元素。解析 html 时，它与标记同义。 developer.mozilla.org/en-US/docs/Web/SVG/Element/image
我认为您不能将<image> 标记用作<div> 标记的直接子级。它是svg 的一部分。
你更新了你的代码，现在你在你的css中定位了一个id，但是你已经设置了一个class。

【解决方案1】：

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

overflow:auto;
display: table;

正确显示子图像元素的父元素。

CSS：

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

【讨论】：