HTML电子邮件-媒体查询导致图像高度不同

我有一个问题，因为我想在电子邮件中创建一个块，左边有一个大图像，右边有4个小图像。

在手机上，我只想让它缩小规模。 我已经设置好了，但问题是，当在移动设备上观看时，小图像的高度不一样，因为总宽度是350px，其中1/4是87,5px。因此，第一列的值为88px，第二列的值为87px，因此它们的高度也较高，导致它们的高度不同。

有没有一种方法可以让它们在手机上保持相同的高度，即使它们在百分比计算时宽度不完全相同当然，在某种程度上，它也适用于其他比例的图像

这是我的代码：

-
html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
身体{
-webkit文本大小调整：无；
-ms文本大小调整：无；
-webkit字体平滑：抗锯齿；
边距：0！重要；
填充：0！重要；
宽度：100%！重要；
宽度：自动！重要；
背景：#f7f7f7；
}
.ReadMsgBody{
宽度：100%；
}
#展望a{
填充：0；
}
.ReadMsgBody{
宽度：100%；
}
.外部类{
宽度：100%；
}
.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass字体、.ExternalClass td、.ExternalClass div{
线高：100%；
}
桌子{
边界塌陷：塌陷；
边界：0；
mso表空间：0pt；
mso表rspace:0pt；
}
表td{
边界塌陷：塌陷；
边界：0；
mso表空间：0pt；
mso表rspace:0pt；
}
p{
保证金：0；
填充：0；
页边距底部：0；
}
{文本装饰：无！重要；}
a:访问{color:inherit！important；}
span.MsoHyperlink{
mso样式优先级：99；
颜色：继承；
}
span.msohyperlink{
mso样式优先级：99；
颜色：继承；
}
.a_价格a{
颜色：#000001；
文字装饰：无；
}
img{
边界：0；
高度：自动；
线高：100%；
大纲：无；
文字装饰：无；
-ms插值方式：双三次插值；
}
.在线{
颜色：#8a8a8b；
文字装饰：无；
}
.buttonWhite a、.buttonWhite 2 a{
颜色：#000001；
文字装饰：无；
}
.buttonBlack a、.buttonBlack 2 a{
颜色：#FFFFF E；
文字装饰：无；
}
.页脚a{
颜色：#505359；
文字装饰：下划线；
}
.版权a{
颜色：#7676；
文字装饰：下划线；
}
*[class=“header”]img，*[class=“columnTop”]img{
高度：自动！重要；
垂直对齐：底部对齐；
}
表2.header2 td.header3{
高度：自动！重要；
垂直对齐：底部对齐；
}
@仅介质屏幕和（最大宽度：600px）{
*，*：：之前，*：：之后{
框大小：边框框；
}
身体{
宽度：自动！重要；
}
*[class=“fullWidth”]{
宽度：100%！重要；
最大宽度：100%！重要；
最小宽度：100%！重要；
}
*[class=“tableWrapper”]{
宽度：350px！重要；
最大宽度：350px！重要；
最小宽度：350px！重要；
}
*[class=“table600”]{
宽度：90%！重要；
保证金：0自动；
}
*[class=“在线”]{
文本对齐：居中！重要；
填充：10px！重要；
}
*[class=“logo”]{
填充：20px 0 30px 0！重要；
}
*[class=“mobilelogo”]{
宽度：145px！重要；
}
*[class=“icon1”]{
宽度：34px！重要；
}
*[class=“icon2”]{
宽度：44px！重要；
}
*[class=“icon3”]{
宽度：42px！重要；
}
*[class=“header”]img，*[class=“columnTop”]img，*[class=“columntbottom2”]img{
最小宽度：100%！重要；
宽度：100%！重要；
高度：自动！重要；
}
*[class=“header2”]img{
最小宽度：100%！重要；
宽度：100%！重要；
高度：自动！重要；
}
表2.header2 td.header3{
最小宽度：100%！重要；
宽度：100%！重要；
高度：自动！重要；
}
*[class=“floatTable”]，*[class=“floatTableMiddle”]{
浮动：无！重要；
宽度：100%！重要；
}
*[class=“floatTableMiddle”]{
边缘底部：20px；
}
*[class=“column”]{
最小宽度：50%！重要；
宽度：50%！重要；
最大宽度：50%！重要；
}
*[class=“columnsall”]{
最小宽度：33%！重要；
宽度：33%！重要；
最大宽度：33%！重要；
}
*[class=“column25”]{
最小宽度：25%！重要；
宽度：25%！重要；
最大宽度：25%！重要；
}
*[class=“columnFooter”]{
宽度：32.666 7%！重要；
高度：自动！重要；
填充：18px 0 20px 0！重要；
}
*[class=“columnFooterSpacer”]{
宽度：1%！重要；
}
*[class=“columnFooter”]img{
最大宽度：70px！重要；
宽度：100%！重要；
高度：自动！重要；
}
*[class=“columnTop”]，*[class=“columnTop2”]{
宽度：100%！重要；
显示：表头组！重要；
}
*[class=“columnBottom”]，*[class=“columnBottom2”]{
宽度：100%！重要；
显示：表尾组！重要；
}
*[class=“button窄带”]{
右边填充：15px！重要；
}
*[class=“buttonWhite2”]，*[class=“buttonBlack2”]{
左侧填充：15px！重要；
}
*[class=“content”]{
字体大小：14px！重要；
线高：24px！重要；
}
*[class=“mobileHeight”]{
高度：30px！重要；
宽度：350px！重要；
最大宽度：350px！重要；
最小宽度：350px！重要；
}
*[class=“mobileHide”]{
显示：无；
}
*[class=“tableButton”]{
宽度：100%！重要；
最小宽度：100%！重要；
}
*[class=“导航”]{
填充底部：20px！重要；
}
*[class=“导航”]td{
填充：0！重要；
文本对齐：居中！重要；
宽度：自动！重要；
}
*[class=“navigation”]td-img{
保证金：0自动！重要；
高度：12px！重要；
宽度：自动！重要；
}
*[class=“buttonWhite”]，*[class=“buttonBlack”]{
填充顶部：5px！重要；
填充底部：5px！重要；
}
阿巴尼姆先生{
宽度：105px！重要；
高度：自动！重要；
} 
表[class=“r\u tableWrapper”]{
宽度：350px！重要；
最大宽度：350px！重要；
最小宽度：350px！重要；
保证金：0自动！重要；
}
td[class=“r_tableWrapper”]{
宽度：100%！重要；
最大宽度：100%！重要；
最小宽度：100%！