HTML-E-Mails - Passen Sie ein Bild in eine Tabellenzelle

Ich habe eine Tabelle mit drei td und jeder von ihnen muss Bilder in ihnen haben. Die Breite und Höhe von td sind fest, aber die Bildgrößen können variieren. Ziel ist es, die Bilder anzupassen, ohne sich in Zellen oder im Bild selbst zu verzerren. Kann background-image Eigentum nicht benutzen (saugt ich weiß!). Hier ist der Code:HTML-E-Mails - Passen Sie ein Bild in eine Tabellenzelle

<table cellpadding="2" cellspacing="2" width="600"> 
    <tr> 
     <td width="190" height="190" align="center"> 
      <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; width: 100%; height:auto;" /> 
     </td> 
     <td width="190" height="190" align="center"> 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:auto;" /> 
     </td> 
     <td width="190" height="190" align="center"> 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:100%;" /> 
     </td> 
    </tr> 
</table>

Ich habe versucht, drei verschiedene Arten in drei Zellen - keine gibt uns ein Ergebnis, wo die Bilder der Größe verändert erhalten. Jede Hilfe wird geschätzt. Vielen Dank.

Quelle

2017-10-12 JeezItsMe

Sie geben für td und Bild unterschiedlicher Größe verwenden. Gib Bildgröße gleich td. style = "Anzeige: Block; Breite: 190px; Höhe: 190px;" –

Beseitigt den Zweck - versucht, Bilder unterschiedlicher Größe zu erhalten, die in eine Tabellenzelle fester Größe ohne Verzerrung passen. – JeezItsMe

Versuchen Sie es mit - max-width: 100% und max-height: 100% für Bildstil. Dadurch wird der größere Wert (Höhe oder Breite) auf die Breite (oder Höhe) der Zelle maximiert, ohne das Bild zu strecken.

EDIT: neu zu diesem ... Code-Snippet hinzufügen. Da dein Stil inline ist, habe ich es so gelassen.

<table cellpadding="2" cellspacing="2" width="600"> 
 
    <tr> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; max-width: 100%; max-height:100%;" /> 
 
     </td> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%;" /> 
 
     </td> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%%;" /> 
 
     </td> 
 
    </tr> 
 
</table>

Quelle

2017-10-12 06:49:50 Morphy

Tolles Zeug - das ist, was ich vermisst habe. Sehr einfach zu erreichen, aber es in rohen HTML und minimalen CSS für E-Mail-Vorlagen zu tun, macht es schwierig. – JeezItsMe

Ich bin froh, dass ich helfen konnte. :) – Morphy

Das Problem mit 'max-width: 100%' ist, dass einige E-Mail-Clients die volle Breite des Bildes ausfüllen, auch wenn es die Tabellenzellengröße überschreitet. Ich würde 'max-width: 190px' versuchen und width =" 190 "zu dem Bild hinzufügen, da Outlook max-width überhaupt nicht verwendet. – gwally

Dieses Problem konfrontiert werden, weil Sie die CSS in Ihrem Projekt und die Breite und Höhe es verwenden können also..you als HTML als auch gründlich Ihre ganze CSS überprüfen kann ...

Quelle

2017-10-12 06:45:58

Es ist eine HTML-E-Mail, es gibt keine externe CSS – JeezItsMe

Versuchen:

style="display:block;max-width: 100%; height:auto;"

Quelle

2017-10-12 06:46:00

try this:

<table> 
    <tr> 
    <td width="190" height="190"> 
    </td> 
    </tr> 
</table>

Und die coresponding css:

td { 
    background-image: url("https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
}

Quelle

2017-10-12 06:52:04

Hintergrundbilder funktionieren nicht in E-Mail-Clients wie Outlook. – gwally

Okay, danke, ich wusste es nicht –

Hier die ist. Sie können height: 100% und object-fit:cover

img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    display: block; 
 
}

<table cellpadding="2" cellspacing="2" width="600"> 
 
    <tr> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" /> 
 
     </td> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" /> 
 
     </td> 
 
     <td width="190" height="190" align="center"> 
 
      <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" /> 
 
     </td> 
 
    </tr> 
 
</table>

Quelle

2017-10-12 06:53:57 Kumar

HTML-E-Mails - Passen Sie ein Bild in eine Tabellenzelle

Antwort

Verwandte Themen