Perché il mio logo mobile è strano

image
È 3:1, ma viene mostrato come 1:1. È un file SVG.
image

Lo stile degli elementi del logo è lo stesso di qui

Modifica: Lo stesso senza alcun componente

Modifica #2: È causato dall’attributo viewBox dell’SVG. Come posso rendere un SVG compatibile con Discourse?

Forse prova a modificare il viewBox dell’SVG? In base allo screenshot, indovino che, nonostante il logo abbia un rapporto 3:1, il viewBox sia 1:1?

L’aspect ratio della viewbox è 3:1. Funziona correttamente su desktop.

Ho provato alcune cose e sembra che il viewBox stia causando problemi… se invece sposto quei valori su height/width e rimuovo il viewBox, funziona allo stesso modo su desktop e mobile.
Quindi, aprendo il file SVG in un editor di testo e modificando la seconda riga da:

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

a:

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

Dovrò indagare sul motivo per cui si comporta diversamente su mobile…

Va bene quando specifico l’max-height dell’immagine uguale all’height. Ma sembra che venga generato un valore. Quindi non penso che sia una soluzione :smiley:

Sembra che width e height specifichino un valore assoluto. Ma la view box è più simile a un valore “relativo”.
E va bene. Grazie mille :smiley: