HTML電子郵件 - 適合表格單元格中的圖像

我有一個表格，有三個td，每個表格都需要有圖像。 td的寬度和高度是固定的，但圖像大小可能會有所不同。目標是適應圖像而不會在細胞或圖像本身中產生扭曲。不能使用background-image屬性（糟透了，我知道！）。下面的代碼：HTML電子郵件 - 適合表格單元格中的圖像

<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>

我已經在三個單元嘗試三種不同的風格 - 沒有給我在那裏得到的圖像調整的結果。任何幫助讚賞。謝謝。

來源

2017-10-12 JeezItsMe

你給了TD和圖像大小不同。給圖像大小等於td。 style =「display：block; width：190px; height：190px;」 –

擊敗目的 - 試圖實現不同大小的圖像，以適應固定大小的表格單元而不失真。 – JeezItsMe

嘗試使用 - 最大寬度：100％和最大高度：100％的圖像風格。這將最大化單元格的witdh（或高度）的較大值（高度或寬度），而不會拉伸圖像。

編輯：新增功能...添加代碼片段。既然你的風格是內聯的，我就這樣離開它。

<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>

來源

2017-10-12 06:49:50 Morphy

偉大的東西 - 這就是我錯過了。實現起來非常簡單，但必須以原始HTML和電子郵件模板的最小CSS做到這一點，這很難實現。 – JeezItsMe

很高興我能幫到你。 :) – Morphy

'最大寬度：100％'的問題在於某些電子郵件客戶端將填充圖像的整個寬度，即使它超過表格單元格大小。我會嘗試'最大寬度：190px'並將寬度=「190」添加到圖像中，因爲Outlook根本不使用最大寬度。 – gwally

可能會面臨這個問題，因爲你可以在項目中使用CSS和寬度和高度也also..you可以徹底檢查你的整個CSS以及在HTML ...

來源

2017-10-12 06:45:58

這是一個html電子郵件，沒有外部css – JeezItsMe

嘗試：

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

來源

2017-10-12 06:46:00

試試這個：

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

而且coresponding CSS：

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

來源

2017-10-12 06:52:04

背景圖像在Outlook等電子郵件客戶端中不起作用。 – gwally

好的，謝謝你，我不知道 –

這裏是。您可以使用height: 100%和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>

來源

2017-10-12 06:53:57 Kumar

HTML電子郵件 - 適合表格單元格中的圖像

回答

相關問題