矩形图片在手机上缩小为正方形（在桌面上按比例查看）

Question

电子邮件中的图像内容是使用动态数据提供的。图片是一本书的封面，大部分时间是方形的，有时是矩形的（高度大于宽度）。

代码在桌面邮件客户端中正确显示了两种类型的图像，但是当我们在 iPhone 中打开电子邮件时，矩形图像也缩小为正方形。

桌面上的示例矩形图像：

在 iPhone 上查看的同一图片：

<img>（包含在 <td> 中）在电子邮件模板中具有以下代码：

<td style="padding: 22px 11px 0px; text-align: center">
<img src="http://placehold.it/170" width="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
</td>

正如我们在上面的代码中看到的，<img> 继承了一个名为 "fluid" 的 class，它在媒体查询中具有以下属性：

@media screen and (max-width: 600px) {

      .fluid {
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
...
}

我不是front-end人。我可以得到一些关于为什么我在移动设备上得到正方形的帮助吗？

更新：

我还在上面的媒体查询部分找到了以下 CSS：

.img221 {
        width: 221px !important;
        height: 221px !important;
      }

我注意到 <img> 的 class 属性中提到了 img221。

Answer 1

在您的 .img221 class 中，您将高度和宽度设置为相同的大小，这会强制图像为正方形。将 class 更改为

.img221 {
    width: 221px !important;
 }

矩形图片在手机上缩小为正方形（在桌面上按比例查看）

Rectangular picture shrunk to square in mobile (while looking in proportion in desktop)

css

html-email

media-queries