Neu Logo in HTML Emailvorlage

[Möfy]

Hallo ihr schlauen Köpfe.

Ich stosse grad mal wieder an die Grenze der Verzweiflung.
Es geht um die Emailvorlage, in HTML angezeigt.
Kann mir da jemand helfen?

Da ist im Header das Logo platziert. Sieht in der Desktopversion perfekt aus in meinem Mail (Apple-Mail).
Habe das Mail automatisch an den Kunden geschickt, da nimmt das Logo vom Header den ganzen Bildschirm ein, weil es so überdimensional gross dargestellt wird. (Outlook).
Warum?

Ich habe nun Gmail, GMX, Outlook getestet und bei mir ist es nie in dieser Dimension dargestellt.
Warum?

Ich habe mir gedacht, es liegt evt. an der Mobil-Version.
Also hab ich mich dran gemacht das Logo in der Mobil-Version zu verkleinert.
Es geht um dieses Bild/Code:
#headerImage{
height:auto !important;

/*@editable*/ max-width:600px !important;
/*@editable*/ width:30% !important; /*width habe ich von 100% auf 30% verkleinert. Sieht gut aus, alles funktioniert.*/

}

<div align="center">
<img src="https://fry.ch/bilder/intern/shoplogo/Möbel Fry_Logo_rund.png" style="max-width:120px;" id="headerImage" alt="Firmenlogo"/>
</div>

Warum wird mir das Logo nun nicht mehr mittig angezeigt sonder klebt am linken Rand trotz dem align Center?

 

[DASevents]

html hab ich schon lange nicht mehr gemuckelt aber
probier mal <center><img src="bild.jpg" height="200" width="200"> </center>

 

[DASevents]

hab eben nochmal die Frage bei chatGBT eingegeben... genial macht immer wieder SPASS dat Ding

 

[Möfy]

html hab ich schon lange nicht mehr gemuckelt aber
probier mal <center><img src="bild.jpg" height="200" width="200"> </center>

Das funktioniert leider nicht. So wird es auch in der Desktopversion links angezeigt. Aber danke für den Input

 

[DASevents]

also bei mir gehts,

welche Wawi ?
bie ist es noch die 1.5.552

 

[Möfy]

Habs nun ohne height="200" width="200" ausprobiert. So funktioniert es perfekt. lieben Dank.

 

[mh1]

Es geht um dieses Bild/Code:
#headerImage{
height:auto !important;

/*@editable*/ max-width:600px !important;
/*@editable*/ width:30% !important; /*width habe ich von 100% auf 30% verkleinert. Sieht gut aus, alles funktioniert.*/

}

<div align="center">
<img src="https://fry.ch/bilder/intern/shoplogo/Möbel Fry_Logo_rund.png" style="max-width:120px;" id="headerImage" alt="Firmenlogo"/>
</div>

Warum wird mir das Logo nun nicht mehr mittig angezeigt sonder klebt am linken Rand trotz dem align Center?

Dein unterer <div>-Container ist ja 100 % breit und du sagst jetzt, dass dieser Container (NICHT dessen Inhalt) zentriert werden soll (align="center").
Das der ganze Container jetzt zentriert ist, siehst du aber gar nicht, da er ja 100% breit ist.

lösen könnte man das so:

• entweder den INHALT des Containers zentrieren: text-align: center;, oder
• den Container mit display: flex anzeigen lassen: div { display: flex; justify-content: center; } img { width: 60%; }, oder
• den <div>-Container ganz weglassen und einfach nur das Bild zentrieren mit margin: auto;. Das geht aber nur, wenn man zunächst das Inline Element <img> in ein block-level-Element konvertiert und eine Breite definiert, also: img { width: 30%; margin: auto; display: block; }

Ich würde ja das Dritte machen. Dann spart man sich einen <div> ... </div> und dein Code ist nicht so verschachtelt.