1
私は現在、私のブログのクライアント/フォロワー向けにMailchimpからニュースレターを始めています。電子メールがデフォルトのiPhone電子メールクライアントを使用している誰かに行くと、画像はthisのような斜めに出てきます。Apple MailのこのメールのCSSに関する問題
個別のiOSクライアント（Airmail）でメールをチェックしたところ、うまく見えました。 Mailchimpのプレビューでもうまく見えるので、これはAppleのデフォルトのクライアントと関係があります。何か案は？
は、ここでは100％と幅を与えている場合は、100％とないコードの最大の高さや高さを行う
<!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 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 [email protected]
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>
常に複数のビューに画像を調整するのは苦痛です。私があなたの場合は、テキストとイメージの両方を組み合わせて1つのイメージを作成して使用します。 –
画像は常に幅100％、高さautoまたは高さ100％、幅は自動ですので、画像は比例します。 – Syfer