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電子郵件 - 媒體查詢導致圖像的高度不同

回答

相關問題