iPhone邮件调整html电子邮件中的图像/ div
pre*_*pii 13 html css email ios
我正在使用MadMimi进行电子邮件促销.到目前为止,我的电子邮件在所有浏览器和设备上都保持一致,包括iPad上的iOS(在Mail应用程序中).但是,iPhone上的iOS上的图像(同样是Mail应用程序)存在一个奇怪的调整大小问题.请参阅下面的CSS和屏幕截图.如您所见,图像突出其父元素的宽度.有谁知道为什么会发生这种情况或如何纠正它？谢谢.
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 类并编辑那里的宽度，这样您就不会更改其余的工作设备。