HTML电子邮件 - 媒体查询会在图片上产生不同的高度

时间：2017-05-31 13:40:01

标签： html css email media-queries html-email

我遇到了问题，因为我想在电子邮件中创建一个块，左边有一个大图像，右边有4个小图像。 Example of the block I want to make

在移动设备上，我只是希望它缩小它。 所以我已经设置了它，但问题是，当在移动设备上观看时，小图像的高度不同，因为总宽度为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">
			   
<table width="600" border="0" cellspacing="0" cellpadding="0" class="tableWrapper" bgcolor="#fcfcfc" align="center">
	<tbody>
		<tr>
			<td class="tableWrapper" style="width: 600px; max-width: 600px; min-width: 600px;" align="center">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
				<tbody>
					<tr>
						<td class="column" width="300" align="left" valign="top">
						<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
							<tbody>
								<tr>
									<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>
								</tr>
							</tbody>
						</table>
						</td>
						<td class="column" width="300" align="left" valign="top">
						<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
							<tbody>
								<tr>			
									<td class="column" width="150" align="left" valign="top">
									<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
										<tbody>
											<tr>
												<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;" />
												<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>
											</tr>
										</tbody>
									</table>
									</td>
									<td class="column" width="150" align="left" valign="top">
									<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
										<tbody>
											<tr>
												<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;" />
												<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>
											</tr>
										</tbody>
									</table>
									</td>	
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>


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

1 个答案:

答案 0 :(得分：0)

我认为这就是你所追求的。我用过你的图片，但桌子必须重做。你曾经安静地使用了许多表，也许你的编辑正在这样做（shurgs）。

我所做的事情的细分： 每种图像样式的宽度为100％，高度为auto。这意味着图像会根据列进行调整（每列占表格的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%">
		  <table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <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>
			  <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>
			</tr>
			<tr>
			  <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>
			  <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>
			</tr>
		  </tbody>
		</table>
</td>
    </tr>
  </tbody>

运行上面的代码并执行全屏操作，调整浏览器大小以使其正常工作。

干杯

相关问题
最新问题