SVG内容 - 仅缩放宽度并显示全高

Question

我创建了一个带有foreignObject文本的SVG，并使用img标签将其链接到我的HTML页面。

问题是svg的宽度按设备缩放，但高度固定在153px左右。我已将svg的宽度和高度设置为100％。

我无法为svg提供固定高度，因为我希望文本部分能够响应并根据设备进行缩放。

因此，当图像没有完整显示高度时，foreignObject文本内容会被截断。

我已经尝试了viewBox和preserveAspectRatio失败。

这里是Jsfiddle example

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/>

实际使用的屏幕截图

在这种情况下，我无法使用任何JS解决方案。

Answer 1

视口百分比长度：

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

  

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。然而，   当根元素上的溢出值为auto时，任何滚动   假设条不存在。作为设置两者的替代方案   html / body元素的高度为100％，你也可以使用   视口百分比长度：

body {
    height: 100vh;
}
img {
  width: 100%; 
  height:100%;
}

<img src="http://treebliss.com/shipping.svg"  />

Answer 2

图像应位于100％高度（vh）的容器中

我创建了fiddle

div {
text-align: center;
height: 100vh;
}
img {
border: thin dotted darkgrey;
width: 100%;
height: 100%;
}