Question

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

不幸的是，如果我将表格单元格的宽度设置为33.3％并且图像设置为表格单元格宽度的100％，我最终得出的结果是其中一个图像通常比其他，最大尺寸为800像素，但也适用于其他较小的浏览器窗口尺寸。

如果我将img设置为.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%;*/ }，则修复了高度问题，但我的设计现在已不再响应。

这是我的CSS ......

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

...和我的HTML ......

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell : mainCell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! mainCell
    cell.backgroundColor = cellColor[indexPath.row]
    cell.cellLabel.text = cellLabels[indexPath.row]

    cell.cellLabel.font = cell.cellLabel.font.withSize(27)
    cell.cellLabel.adjustsFontSizeToFitWidth = true
    cell.cellLabel.minimumScaleFactor = 0.1
    cell.cellLabel.baselineAdjustment = .alignCenters
    cell.cellLabel.textAlignment = .center
    cell.cellLabel.lineBreakMode = .byWordWrapping
    cell.cellLabel.numberOfLines = 4
}

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

Answer 1

您可以尝试使用bootstrap解决问题。它响应并满足您的标准（我认为）。

当您需要响应式网页设计时，也始终避免使用表格。

＆＃13;

 
img {
  width: 100%;
  height: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

更新/添加了这些样式

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>

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

2 个答案: