html - 如何使响应式电子邮件表格中的列图像保持相同高度

Question

作为必须响应的电子邮件模板的一部分(不幸的是，它也是基于表格的)我有三列，其中包含相同大小的图像。图片需要位于单独的表格单元格中，因为它们下方还需要有文本。

不幸的是，如果我将表格单元格的宽度设置为 33.3%，并将图像设置为表格单元格宽度的 100%，我最终会遇到这样一种情况，其中一个图像通常比另一个图像短 1 个像素其他，最大尺寸为 800 像素，但也有其他较小的浏览器窗口尺寸。

如果我将 img 设置为 min-height:100% 这会修复高度问题，但我的设计现在不再响应。

这是我的 CSS...

.email_table {
  max-width:800px;
  width:100%;
  border-collapse: collapse;
}
.email_cell {
  width: 33.3%;
}
.email_cell img {
  display: block;  
  width: 100% !important;
  /*min-height:100%;*/
}

...和我的 HTML ...

<table class="email_table">
  <tr>
    <td class="email_cell">
      <img src="http://placehold.it/265x177" >
    </td>
    <td class="email_cell">
<img src="http://placehold.it/265x177" alt="" border="0" style="margin: 0;padding: 0;display: block;width: 100% !important;">        
    </td>
    <td class="email_cell">
      <img src="http://placehold.it/265x177" >
    </td>    
  </tr>
</table>

有没有其他人遇到过这个问题并找到了解决方案？

Answer 1

更新/添加了这些样式

tr {
  display: flex;
}
.email_cell {
  width: 33.3%;
  padding: 0;
}

 
.email_table {
  max-width:800px;
  width:100%;
  border-collapse: collapse;
}
tr {
  display: flex;
}
.email_cell {
  width: 33.3%;
  padding: 0;
}
.email_cell img {
  display: block;  
  width: 100% !important;
  min-height:100%;
}

<table class="email_table">
  <tr>
<td class="email_cell">
  <img src="http://placehold.it/265x177" >
</td>
<td class="email_cell">
<img src="http://placehold.it/265x177" alt="" border="0" style="margin: 0;padding: 0;display: block;width: 100% !important;">        
</td>
<td class="email_cell">
  <img src="http://placehold.it/265x177" >
</td>    
  </tr>