image - 如何使图像宽度相等

标签 image css html-table responsive-design

<分区>

我正在尝试控制表格内的图像，并在屏幕尺寸缩小时将它们保持在相同的水平和相同的宽度。这将用于电子邮件，因此我会避免全局样式，例如 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>

最佳答案

只需将 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>

关于image - 如何使图像宽度相等，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48591315/

上一篇：html - 即使使用 Web 字体加载器，如何避免 Flash of Unstyled Text (FOUT)？

下一篇：jquery - javascript 没有在 flask 中加载管理模板

相关文章：

asp.net - 在asp.net网站中显示图片/照片

Javascript 缩略图弹出窗口

html - 我似乎无法将这张 table 居中

html - 表设计 - 内表？

html - 表格填充另一个单元格内的剩余空间(IE8)

c++ - 十六进制数据 (RGB888) 中的图像文件到 BMP、JPG、PNG 或其他格式

image - Excel VBA自定义函数从URL故障插入图像

java - 打印屏幕期间的噪音

jquery - IE 中 jQuery 的文本对齐始终返回左对齐

html - 灵活的盒子布局或网格布局或多列