iPhone邮件调整大小图像/ div在HTML电子邮件

问题描述：

我使用MadMimi电子邮件促销。到目前为止，我的电子邮件在所有浏览器和设备上看起来都很一致，包括iPad上的iOS（在邮件应用程序中）。然而，iPhone上的iOS上的图像有一个奇怪的调整大小问题（同样，邮件应用程序）。请参阅下面的CSS和屏幕截图。正如你所看到的，图像会突破其父元素的宽度。有谁知道为什么发生这种情况或如何纠正？谢谢。iPhone邮件调整大小图像/ div在HTML电子邮件

CSS：

.outer-wrapper { 
    width: 600px; 
    max-width: 100%; 
    margin: 0 auto; 
} 
.inner-wrapper { 
    width: 100%; 
    border-radius: 10px; 
    overflow: hidden; 
    background-color: white; 
    border: 1px solid #dddddd; 
} 
img { 
    width: 600px; 
    max-width: 100%; 
    height: auto; 
}

HTML：

<body> 
    <div class="outer-wrapper"> 
     <div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div> 
     <div class="inner-wrapper"> 
     <a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a> 
     <div class="body-wrapper"> 
      [content...] 
     </div> 
     </div> 
    </div> 
</body>

答

由于图像状态100％它会占用的整个宽度。如果您希望它与信件的宽度相同，则应将其移动到该div标签内。我假设它不是因为我看不到html代码。

如果你有不同的设备的特定的css部分，你可以在那里改变它。或者，另一种选择是为这个ios设备创建一个css类，并在那里编辑宽度，这样就不会更改其他工作设备。

我添加了HTML。我明白，图像的100％宽度将填充其父母，而不是身体，但一个div，它也有父母。 – preahkumpii

你为什么不把内包装物放在身体包装物内，这样它可以采取父母的宽度？或者就像我之前说过的，你可以让css类在它处于一个ios设备中时拾取，因此它可以为ios设备设置不同的宽度。例如@media仅屏幕和（最小装置宽度：375px）和（最大装置宽度：667px）和（-webkit-min-device-pixel-ratio：2）{width：80％; } –

我没有把内部包装放在body wrapper中，因为图像是标题图像，并且内容与该图像分开。内容中还包含图片。身体包装也将有利润等。除此之外，核心问题仍然存在，为什么图像在iPhone上不像其他客户那样行事。 – preahkumpii

答

我通过反复试验找到了答案。我已将.outer-wrappermax-width和width的值取反。正确的CSS应该阅读：

.outer-wrapper { 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
}

我认为正在发生的是，当用户在iPhone上，还有中视小于600个像素，所以渲染器回落至max-width为.outer-wrapper。并且由于它设置为100％而不是声明的像素值，所以100％宽度将回落到视口宽度，而不是其父宽度。所有其他浏览器的视口大于600像素，这是一个声明的像素值，并且不会发生问题（iPad，桌面等）。显然，我的愚蠢的疏忽。

这是它应该看起来的样子。

iPhone邮件调整大小图像/ div在HTML电子邮件

相关推荐