【发布时间】：2017-11-19 15:26:06
【问题描述】：
我目前正在通过 Mailchimp 为我的客户/我的博客的关注者开始一个时事通讯，并且出现了一个问题。当电子邮件发送给使用默认 iPhone 电子邮件客户端的任何人时，图像会像 this 一样歪斜。
我在一个单独的 iOS 客户端 (Airmail) 上检查了电子邮件，它看起来还不错。它在 Mailchimp 的预览版中看起来也不错，所以我猜这与 Apple 的默认客户端有关。有什么想法吗？
这是 HTML 和内联 CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/files/1e71bcad-6a84-4265-bb54-84188d0d027f/email1sheet.04.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="ult">
<div class="header">
<img src="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/images/0a53d223-c847-49f6-97c3-2119430d3dce.png" alt="colorful banner" style="max-width: 100%">
</div>
<div class="body-div">
<p>Hi and welcome to my email list! Thanks for joining. This is just a simple welcome email, but let me tell you a little bit about myself. My name is Mason and I'm a graphic designer from Chicago, IL. I love good music, coffee, video games and, of course, design.
<br>
<br>
I’d like to thank you for joining by sharing some content that I think you might enjoy:</p>
<h1>Some Cool Resources</h1>
<p><b>Looking For Stock Photos?</b>
<br>Stock photos are expensive, for sure. I get it. I don’t want to pay for them either. Well, it turns out we’re all in luck. <a href="https://stocksnap.io">Stocksnap</a> is a great site that gives away a ton of high quality, high-res images for free. The pictures here are actually really good. Even as a designer, I’ll admit that I use some of them myself. Check the site out! No need to thank me.</p>
<br>
<p><b>Want To See Some Cool Design Work?</b>
<br>Try browsing <a href="https://dribbble.com">Dribbble</a> sometime. It’s a great site where you can see some very high quality work. Only users who have been invited to the site are allowed to post their work, so all the posts are guaranteed to be somewhat good, at the very least.<br><br>
If you want, give me a follow too! My Dribbble page is <a href="https://dribbble.com/MasonW">here</a>.</p>
<br>
<p><b>Need a New Podcast?</b>
<br>If you haven’t listened to <a href="http://99percentinvisible.org">99% Invisible</a> yet, you definitely need to check it out. This podcast is all about the various kinds of design we come across in life. It’ll help you look at the things you take for granted in life in a whole new way. Each episode is incredibly interesting in its own way. Also, the host, Roman Mars, exudes real passion and has one of the most relaxing voices of any podcast host I know. What’s more… episodes are usually only around 20 - 30 minutes long which is often times the perfect length for your commute to work or for a nice walk.</p>
<h1>Content From Yours Truly</h1>
<p>Thinking of working with a designer sometime soon? Check out a recent blog post of mine where I talk about The Do’s and Don’ts of Working With a Designer. Design can be a misunderstood field and hopefully this will give you a bit of insight.</p>
<br>
<center>
<div class="pic">
<a href="https://medium.com/@mason_weis/the-dos-and-donts-of-working-with-a-designer-on-your-next-project-9f322a53b8e"><img src="https://cdn-images-1.medium.com/max/1000/1*x_BVDlaWwsD0V5PdthkkkA.png" alt="Cover Art and link for my blog post" style="border-top-right-radius: 5px; border-top-left-radius: 5px; max-width: 100%; max-height: 100%; display: block;"></a>
<div class="card">Click above to give it a read!</div>
</div>
</center>
<br>
<h1>Until Next Time!</h1>
<p>Thanks again for subscribing! I’ll only be sending emails once a month, so don’t expect spam or anything like that. Feel free to reach out to me any time as well - my email is masonsweis94@icloud.com
Thanks!
<center>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br>
<a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></p>
</div>
</div>
</body>
</html>【问题讨论】：
-
跨多个视图调整图像总是很痛苦。如果我是你，我会结合文本和图像制作一张图像并使用它。
-
总是做宽度 100% 和高度自动或高度 100% 和宽度自动所以图像是成比例的。
标签： html ios css email mailchimp