首页 文章

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

提问于
浏览 次
0

我创建了一个带有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%"/>

实际使用截图
screenshot

在这种情况下，我不能使用任何JS来解决任何问题 .

html css svg

2 回答

  • 0

    Viewport-percentage lengths:

    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"  />
    回复于
  • 0

    图像应放在高度为100％的容器中（vh）

    我创建了一个fiddle

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

相关问题