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

我遇到了问题，因为我想在电子邮件中将左侧的一个大图像和右侧的4个小图像分块。 Example of the block I want to make HTML电子邮件 - 媒体查询导致图像的高度不同

在移动设备上，我只是想让它缩小比例。所以我设置了它，但问题是，在移动设备上查看时，小图片的高度并不相同，因为总宽度为350px，其中的1/4为87.5px。因此，第一列获得88px，第二列获得87px，因此它们也在高度上升，导致它们不具有相同的高度。 See example of not the same height on mobile

有没有办法在移动设备上保持它们全部在同一高度，即使它们在以百分比计算时宽度不完全相同？ - 以某种方式它也可以工作，当然还有其他比例的图像。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
 
<html> 
 
<head> 
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
<meta content="width=device-width" name="viewport" /> 
 
<!--[if gte mso 9]> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
<![endif]--> 
 
<!--[if gte mso 15]> 
 
    <style> 
 
    /* Outlook 2013 Height Fix */ 
 
    body table { font-size: 0; line-height: 0; } 
 
    table tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; mso-height-source:0;} 
 
    table td { font-size: 0px; line-height: 0;mso-width-source:1px;} 
 
    </style> 
 
<![endif]--> 
 
<title>-</title> 
 
<style type="text/css" media="screen"> 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    -webkit-text-size-adjust: none; 
 
    -ms-text-size-adjust: none; 
 
    -webkit-font-smoothing: antialiased; 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
    width: 100% !important; 
 
    width: auto !important; 
 
    background: #f7f7f7; 
 
} 
 
.ReadMsgBody { 
 
    width: 100%; 
 
} 
 
#outlook a { 
 
    padding:0; 
 
} 
 
.ReadMsgBody { 
 
    width:100%; 
 
} 
 
.ExternalClass { 
 
    width:100%; 
 
} 
 
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 
 
    line-height: 100%; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border: 0; 
 
    mso-table-lspace:0pt; 
 
    mso-table-rspace:0pt; 
 
} 
 
table td { 
 
    border-collapse:collapse; 
 
    border: 0; 
 
    mso-table-lspace:0pt; 
 
    mso-table-rspace:0pt; 
 
} 
 
p { 
 
    margin:0; 
 
    padding:0; 
 
    margin-bottom:0; 
 
} 
 

 
a { text-decoration: none !important; } 
 

 
a:visited { color: inherit !important; } 
 
span.MsoHyperlink { 
 
     mso-style-priority:99; 
 
     color:inherit; 
 
    } 
 
    span.MsoHyperlinkFollowed { 
 
     mso-style-priority:99; 
 
     color:inherit; 
 
    } 
 
.a_price a { 
 
    color: #000001; 
 
    text-decoration: none; 
 
} 
 
img { 
 
    border:0; 
 
    height:auto; 
 
    line-height:100%; 
 
    outline:none; 
 
    text-decoration:none; 
 
    -ms-interpolation-mode:bicubic; 
 
} 
 
.online a { 
 
    color:#8a8a8b; 
 
    text-decoration:none; 
 
} 
 
.buttonWhite a, .buttonWhite2 a { 
 
    color: #000001; 
 
    text-decoration: none; 
 
} 
 
.buttonBlack a, .buttonBlack2 a { 
 
    color: #fffffe; 
 
    text-decoration: none; 
 
} 
 
.footer a { 
 
    color:#505359; 
 
    text-decoration:underline; 
 
} 
 
.copyright a { 
 
    color:#767676; 
 
    text-decoration:underline; 
 
} 
 

 
*[class="header"] img, *[class="columnTop"] img { 
 
    height: auto !important; 
 
    vertical-align: bottom; 
 
} 
 
table.header2 td.header3 { 
 
    height: auto !important; 
 
    vertical-align: bottom; 
 
} 
 
@media only screen and (max-width : 600px){ 
 
*, *::before, *::after { 
 
box-sizing: border-box; 
 
} 
 
body { 
 
width: auto !important; 
 
} 
 
*[class="fullWidth"] { 
 
width: 100% !important; 
 
max-width: 100% !important; 
 
min-width: 100% !important; 
 
} 
 
*[class="tableWrapper"] { 
 
width: 350px !important; 
 
max-width: 350px !important; 
 
min-width: 350px !important; 
 
} 
 
*[class="table600"] { 
 
width: 90% !important; 
 
margin: 0 auto; 
 
} 
 
*[class="online"] { 
 
text-align: center !important; 
 
padding: 10px !important; 
 
} 
 
*[class="logo"] { 
 
padding: 20px 0 30px 0 !important; 
 
} 
 
*[class="mobilelogo"] { 
 
width:145px !important; 
 
} 
 
*[class="icon1"] { 
 
width: 34px !important; 
 
} 
 
    *[class="icon2"] { 
 
width: 44px !important; 
 
} 
 
    *[class="icon3"] { 
 
width: 42px !important; 
 
} 
 
*[class="header"] img, *[class="columnTop"] img, *[class="columnBottom2"] img { 
 
min-width: 100% !important; 
 
width: 100% !important; 
 
height: auto !important; 
 
} 
 
*[class="header2"] img { 
 
min-width: 100% !important; 
 
width: 100% !important; 
 
height: auto !important; 
 
} 
 
table.header2 td .header3 { 
 
min-width: 100% !important; 
 
width: 100% !important; 
 
height: auto !important; 
 
} 
 
*[class="floatTable"], *[class="floatTableMiddle"] { 
 
float: none !important; 
 
width: 100% !important; 
 
} 
 
*[class="floatTableMiddle"] { 
 
margin-bottom: 20px; 
 
} 
 
*[class="column"] { 
 
min-width: 50% !important; 
 
width: 50% !important; 
 
max-width: 50% !important; 
 
} 
 
*[class="columnSmall"] { 
 
min-width: 33% !important; 
 
width: 33% !important; 
 
max-width: 33% !important; 
 
} 
 
*[class="column25"] { 
 
min-width: 25% !important; 
 
width: 25% !important; 
 
max-width: 25% !important; 
 
} 
 
*[class="columnFooter"] { 
 
width: 32.66666666666667% !important; 
 
height: auto !important; 
 
padding: 18px 0 20px 0 !important; 
 
} 
 
*[class="columnFooterSpacer"] { 
 
width: 1% !important; 
 
} 
 
*[class="columnFooter"] img { 
 
max-width: 70px !important; 
 
width: 100% !important; 
 
height: auto !important; 
 
} 
 
*[class="columnTop"], *[class="columnTop2"] { 
 
width: 100% !important; 
 
display:table-header-group !important; 
 
} 
 
*[class="columnBottom"], *[class="columnBottom2"] { 
 
width: 100% !important; 
 
display:table-footer-group !important; 
 
} 
 
*[class="buttonArrow"] { 
 
padding-right: 15px !important; 
 

 
} 
 
*[class="buttonWhite2"], *[class="buttonBlack2"] { 
 
padding-left: 15px !important; 
 
} 
 
*[class="content"] { 
 
font-size: 14px !important; 
 
line-height: 24px !important; 
 
} 
 
*[class="mobileHeight"] { 
 
height: 30px !important; 
 
width: 350px !important; 
 
max-width: 350px !important; 
 
min-width: 350px !important; 
 
} 
 
*[class="mobileHide"] { 
 
display: none; 
 
} 
 
*[class="tableButton"] { 
 
width:100% !important; 
 
min-width: 100% !important; 
 
} 
 
*[class="navigation"] { 
 
padding-bottom: 20px !important; 
 
} 
 
*[class="navigation"] td { 
 
padding: 0 !important; 
 
text-align: center !important; 
 
width: auto !important; 
 
} 
 
*[class="navigation"] td img { 
 
margin: 0 auto !important; 
 
height: 12px !important; 
 
width: auto !important; 
 
} 
 
*[class="buttonWhite"], *[class="buttonBlack"] { 
 
padding-top: 5px !important; 
 
padding-bottom: 5px !important; 
 
} 
 
    
 
.abanimg { 
 
width:105px !important; 
 
height:auto !important; 
 
} 
 

 
table[class="r_tableWrapper"] { 
 
width: 350px !important; 
 
max-width: 350px !important; 
 
min-width: 350px !important; 
 
margin: 0 auto !important; 
 
} 
 
td[class="r_tableWrapper"] { 
 
width: 100% !important; 
 
max-width: 100% !important; 
 
min-width: 100% !important; 
 
} 
 
*[class="r_columnWrapper"] { 
 
width: auto !important; 
 
max-width: 300px !important; 
 
margin: 0 auto !important; 
 
margin-bottom: 20px !important; 
 
} 
 
*[class="r_columnTop"] { 
 
width: 100% !important; 
 
display:table-header-group !important; 
 
} 
 
*[class="r_columnBottom"] { 
 
width: 100% !important; 
 
display:table-footer-group !important; 
 
} 
 
*[class="r_buttonWhite"], *[class="r_buttonBlack"] { 
 
font-size: 14px !important; 
 
padding-left: 15px !important; 
 
} 
 

 
table[class="a_tableWrapper"] { 
 
width: 350px !important; 
 
max-width: 350px !important; 
 
min-width: 350px !important; 
 
margin: 0 auto !important; 
 
} 
 
td[class="a_tableWrapper"] { 
 
width: 100% !important; 
 
max-width: 100% !important; 
 
min-width: 100% !important; 
 
} 
 
*[class="a_contentWrapper"] { 
 
padding-left: 25px !important; 
 
padding-right: 25px !important; 
 
width: 100% !important; 
 
max-width: 100% !important; 
 
min-width: 100% !important; 
 
} 
 
*[class="a_header"] img { 
 
min-width: 100% !important; 
 
width: 100% !important; 
 
height: auto !important; 
 
} 
 
*[class="a_column"] { 
 
float: left !important; 
 
width: 100% !important; 
 
display: block !important; 
 
} 
 
*[class="a_column"] table { 
 
width: 80% !important; 
 
margin: 0 auto !important; 
 
} 
 
*[class="a_column"] table img { 
 
width: 250px !important; 
 
height: auto !important; 
 
} 
 
*[class="a_price"] { 
 
font-size: 15px !important; 
 
} 
 
*[class="a_module"] { 
 
font-size: 20px !important; 
 
} 
 
*[class="a_table600"] { 
 
width: 90% !important; 
 
margin: 0 auto; 
 
} 
 
*[class="a_floatTable"] { 
 
float: none !important; 
 
width: 100% !important; 
 
} 
 
*[class="a_floatTable"]:first-of-type { 
 
margin-bottom: 15px; 
 
} 
 
*[class="a_button"] { 
 
padding-left: 10px !important; 
 
padding-right: 10px !important; 
 
padding-bottom: 10px !important; 
 
} 
 
*[class="a_button"] table { 
 
float: none !important; 
 
margin: 0 auto !important; 
 
width: 100% !important; 
 
} 
 
*[class="a_title"] { 
 
font-size: 25px !important; 
 
}  
 
    
 
} 
 
    
 
     
 
@media only screen and (max-width: 320px) { 
 
*[class="tableWrapper"], *[class="mobileHeight"] { 
 
width: 320px !important; 
 
max-width: 320px !important; 
 
min-width: 320px !important; 
 
} 
 
    table[class="a_tableWrapper"] { 
 
width: 320px !important; 
 
max-width: 320px !important; 
 
min-width: 320px !important; 
 
margin: 0 auto !important; 
 
} 
 
    
 
    table[class="r_tableWrapper"] { 
 
width: 320px !important; 
 
max-width: 320px !important; 
 
min-width: 320px !important; 
 
} 
 
    
 
</style> 
 

 
</head> 
 

 
<body bgcolor="#f7f7f7" style="margin: 0px; padding: 0px;"> 
 
<table cellpadding="0" cellspacing="0" width="100%" border="0" bgcolor="#f7f7f7"> 
 
    <tr> 
 
    <td align="center"><table width="600" border="0" cellspacing="0" cellpadding="0" class="fullWidth"> 
 
     <tr> 
 
      <td align="center"> 
 
\t \t \t  
 
<table width="600" border="0" cellspacing="0" cellpadding="0" class="tableWrapper" bgcolor="#fcfcfc" align="center"> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td class="tableWrapper" style="width: 600px; max-width: 600px; min-width: 600px;" align="center"> 
 
\t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td class="column" width="300" align="left" valign="top"> 
 
\t \t \t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
\t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" width="300" height="456" alt="" border="0" style="display: block;" /></td> 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td class="column" width="300" align="left" valign="top"> 
 
\t \t \t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
\t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t <tr> \t \t \t 
 
\t \t \t \t \t \t \t \t \t <td class="column" width="150" align="left" valign="top"> 
 
\t \t \t \t \t \t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
\t \t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <td class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" width="150" height="228" alt="" border="0" style="display: block;" /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" width="150" height="228" alt="" border="0" style="display: block;" /></td> 
 
\t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t <td class="column" width="150" align="left" valign="top"> 
 
\t \t \t \t \t \t \t \t \t <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
 
\t \t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <td class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" width="150" height="228" alt="" border="0" style="display: block;" /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" width="150" height="228" alt="" border="0" style="display: block;" /></td> 
 
\t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t \t </td> \t 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 

 

 
     
 
     </td> 
 
     </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

来源

2017-05-31 Nikolai907

您将背景颜色和图像中的整个颜色设置为相同的颜色。 https://ol2013.capture.litmuscdn.com/856a0d6d-f092-47ff-a982-4eca38fff3e4/results/ol2013-vertical-allowed-1366.png我通过石蕊试运行，看看我能否确定问题，但我可以不知道什么是图像，背景是什么。这使得很难确定问题是什么。你越难让人帮助你，我们的帮助就越少。 – gwally

给出的答案不起作用？ – Syfer

我想这是你所追求的。我已经使用过你的图像，但桌子必须重做。你已经使用了很多桌子，也许你的编辑正在做它（shurgs）。

细节我做了：每个图像样式有100％宽度和高度自动。这将意味着图像会根据列进行调整（每列为表格的50％）。

既然你已经提供这些图片我已经使用了颜色作为背景;-)

查看代码，看看它是如何工作相同。

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width: 600px;"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="50%" align="center" valign="middle" bgcolor="#5e5e5e"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></td> 
 
     <td width="50%"> 
 
\t \t <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t <td width="50%" align="center" valign="middle" bgcolor="#5e5e5e"><span class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></span></td> 
 
\t \t \t <td width="50%" align="center" valign="middle" bgcolor="#5e5e5e"><span class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></span></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t <td width="50%" align="center" valign="middle" bgcolor="#5e5e5e"><span class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></span></td> 
 
\t \t \t <td width="50%" align="center" valign="middle" bgcolor="#5e5e5e"><span class="header"><img src="http://image.s7.exacttarget.com/lib/fe9d13727764027c75/m/1/image-300_Placeholder.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></span></td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t \t </table> 
 
</td> 
 
    </tr> 
 
    </tbody>

运行上面的代码，做一个完整的画面，调整浏览器来查看它是否工作。

干杯

来源

2017-06-01 05:28:44 Syfer

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

回答

相关问题