时间戳

首页 > 解决方案 > 如何使响应式电子邮件表中的列图像保持相同的高度

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

问题描述

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

不幸的是，如果我将表格单元格的宽度设置为 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>

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

标签： htmlcss

解决方案

您可以尝试使用引导程序来解决您的问题。它反应灵敏并满足您的标准（我认为）。

当您想要响应式网页设计时，也总是避免使用表格。

 
img {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row no-gutters">
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
  </div>
</div>

推荐阅读