如何使图像等宽[重复]答案

【问题标题】：How can I make the images equal width [duplicate]如何使图像等宽[重复]
【发布时间】：2018-07-13 11:08:34
【问题描述】：

我正在尝试控制表格内的图像，并在屏幕尺寸缩小时将它们保持在相同的水平和相同的宽度上。这将用于电子邮件，所以我会避免像td width 这样的全局样式，这样电子邮件中的其他元素就不会受到影响。

我使用的代码是：

@media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
}

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

【问题讨论】：

为什么一个表里面有3个表？
我真的不知道！！ @TemaniAfif
所以我的建议是只用一张桌子重新设计
Check This 像这样的东西？ @TemaniAfif
是的，我认为更好，现在它们将始终保持在一条线上；）您可以控制一些宽度以使它们相等

标签： image css html-table responsive-design

【解决方案1】：

只需将width: 33.33%; 应用于表格单元格。

如果您希望图像与底部对齐，请将vertical-align: bottom; 添加到单元格并将display: block 应用于图像：

td {
  width: 33.33%;
  vertical-align: bottom;
}

td img {
  display: block;
}

@media only screen and (max-width:414px) {
  .mobile {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
      <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
      <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
      <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

破坏布局的部分是图像上方的文本。尝试将它移动到其单独行的图像上方，给它一个高度，一切正常。

	@media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
	}

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
  </tr>
  <tr>
<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

让我知道这是否适合你。

【讨论】：