Überlauf: versteckt funktioniert nicht in E-Mail

Question

Ich versuche, einige E-Mails mit einigen Bildern zu senden. Wenn ich die Bilder auf einer Webseite anzeige, sind sie 100x breit und 100px groß, aber wenn das Bild größer als 100px ist, werden die überzähligen Pixel ausgeblendet.

Wenn ich versuche, es in einer E-Mail zu senden, kann ich nicht die überschüssige Höhe des Bildes abschneiden.
Hier ist, was in der E-Mail Ich schicke:

<img src="<?php echo base_url().$thumb;?>" style="border:1px solid #35538d;width:100px;height:100px;overflow:hidden;text-align:center;background-color:#f0f0f0;" rel="nofollow" alt="Profile Photo"> 

Answer 1

Es ist durchaus möglich, dass die CSS Sie versuchen, ist einfach nicht von Ihrem E-Mail-Client nicht unterstützt. E-Mail-Clients unterstützen im Allgemeinen eine stark reduzierte Teilmenge von HTML und nur minimale CSS. Beim Erstellen von HTML-E-Mails ist es oft ein Fall von zurück zu den Grundlagen ... HTML-Tabellenlayout usw., um die größte Unterstützung zu erhalten.

EDIT: IMO versucht, Ernte ein Bild mit HTML/CSS unmöglich sein wird, wenn Sie diese über alle E-Mail-Clients arbeiten möchten. Die relevanten Eigenschaften, die dazu beitragen könnten: Hintergrundbild, Höhe, Überlauf, Clip usw. werden nicht durchgängig unterstützt. Also, obwohl es für einige funktioniert, wird es nicht für andere.

Eine Alternative könnte die Breite reduzieren, so dass die Höhe immer 100px ist. Sie müssten die Breite serverseitig berechnen, um das entsprechende Seitenverhältnis beizubehalten.

Allerdings denke ich, dass die beste Lösung sein könnte, eine (notorische) 100px Image Server-Seite mit PHP zu erzeugen?

Answer 2

Sie können sich die Seite Guide to CSS support in email clients ansehen, um zu sehen, welche CSS-Attribute Sie für die verschiedenen E-Mail-Clients verwenden können und welche nicht.

Answer 3

Um dies zu erreichen, müssen Sie ein quadratisches Objekt (Div oder Tabelle) erstellen und das Bild als Hintergrundbild einfügen. Wenn Sie das Bild als Link benötigen, müssen Sie ein transparentes GIF darüber platzieren.

Answer 4

Als Antwort auf Alan O'Rourke wird Hintergrundbild in Outlook-E-Mail-Clients nicht unterstützt. Wenn Sie das Hintergrundbild verwenden möchten, stellen Sie sicher, dass es als Inline-Stil verwendet wird, da Gmail alle CSS-Elemente entfernt, die nicht inline sind.