我的手机Logo为什么很奇怪

支持
1

image
比分是 3:1，但显示为 1:1。这是一个 SVG 文件。
image

徽标元素的样式与这里相同。

编辑：不使用任何组件时也是如此。

编辑#2：这是由 SVG 的 viewBox 引起的。如何让 SVG 与 Discourse 兼容？

2

也许可以尝试编辑 SVG 的 viewBox？根据截图，我猜尽管标志是 3:1 的比例，但 viewBox 却是 1:1？

3

视口（viewbox）的宽高比为 3:1，在桌面端显示正常。

4

我尝试了几种方法，发现是 viewBox 导致了问题……如果我将这些值移到 height/width 中并移除 viewBox，那么在桌面端和移动端的显示效果就一致了。

因此，只需在文本编辑器中打开 SVG 文件，将第二行从：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">

修改为：

<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">

我还需要进一步研究为什么在移动端会出现这种差异……

5

当我将图片的 max-height 指定为 height 时没问题。但看起来生成了一个值，所以我认为这不是一个解决方案 :smiley:

6

看起来宽度和高度指定的是绝对值，而 viewBox 更像是“相对”值。没问题，非常感谢 :smiley: