SVG 在手机视图中被截断答案

【问题标题】：SVG Cut off in phone viewSVG 在手机视图中被截断
【发布时间】：2015-08-30 23:34:11
【问题描述】：

我遇到了网站徽标在手机中被截断但在桌面上没有截断的问题。我尝试了不同的方法，例如使用 <img/> <a> <div> 但同样的问题。

这是它在手机中的样子：http://saarman.net/storage/123-mob.jpg

这是它在桌面上的样子：http://saarman.net/storage/123-web.jpg

另外请注意，移动设备中的文本没有浏览器中的粗体。可能是什么问题？

这是我在 <a> 中使用的 CSS 标志所在的位置：

display: block;
width: 300px;
height: 80px;
background-image: url("../image/logo-dark.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
text-indent: -99999em;'

使用 chrome 浏览器在安卓手机上测试

【问题讨论】：

您在 svg 文件中有 viewBox 吗？也许将 viewBox 限制在图像的范围内......
也许你可以在这里找到你的答案：css-tricks.com/scale-svg
您需要向我们展示 SVG。 SVG 的内容是这里的一个因素。

标签： android html css google-chrome svg

【解决方案1】：

在我看来，您的 DIV 似乎超出了屏幕。可能这对你有用：

宽度：100%；最大宽度：300px；

注意：您可能还需要调整高度。但是以下应该做的工作

高度：自动；

【讨论】：

问题似乎不在于 div 将其切断，而是 SVG 从字面上看刚刚结束......这是它在 background-size: 40% 40% 和 repeat-x 下的样子：saarman.net/storage/123-mob2.jpg
还有一些奇怪的东西。如果我将宽度设置为 200% 并使用相同的背景大小：40% 40%，则会出现完整的 svg...我很困惑saarman.net/storage/123-mob3.jpg
是的，我的错误。您说您已尝试使用标签但没有成功。你试过这个： CSS: .my-logo { width: 100%;最大宽度：300px；高度：自动； }