iOS 邮件中的图像尺寸缩小
我正在为应用程序创建 HTML 邮件模板，该模板包含 440 像素宽的图像。
当我在 iPhone 上查看它时，它超出了屏幕的宽度。我见过很多次 iOS Mail 缩小电子邮件的大小以容纳所有内容（例如，来自 Apple 的电子邮件）。
关于我可能做错了什么有什么想法吗？图像 CSS 及其容器 CSS 为：
.photo {
width: 400px;
height: 460px;
padding: 20px;
background: #fff;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.photo img.main-photo {
max-width: 400px;
}
.photo div.caption {
width: 400px;
position: absolute;
bottom: 20px;
font-family: 'Indie Flower';
height: 50px;
font-size: 20px;
}
实际 HTML 为
<div class="photo">
<img src="{{ photo.images.standard_resolution.url }}" class="main-photo" />
<div class="caption">
{{ photo.caption.text }}
</div>
</div>
更新： 下面是其外观的示例。我不希望它超出屏幕
I'm creating an HTML mail template for an app, and the template includes a 440px wide image.
When i look at it on my iphone, it goes beyond the width of the screen. I've seen plenty of times when iOS Mail shrinks the size of the email to fit everything in (for instance, emails from Apple).
Any ideas on what I might be doing wrong? The image CSS and it's container CSS is:
.photo {
width: 400px;
height: 460px;
padding: 20px;
background: #fff;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.photo img.main-photo {
max-width: 400px;
}
.photo div.caption {
width: 400px;
position: absolute;
bottom: 20px;
font-family: 'Indie Flower';
height: 50px;
font-size: 20px;
}
and the actual HTML is
<div class="photo">
<img src="{{ photo.images.standard_resolution.url }}" class="main-photo" />
<div class="caption">
{{ photo.caption.text }}
</div>
</div>
UPDATE: Here is an example of how it looks. I dont want it to stretch beyond the screen
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试删除宽度并仅使用 max-width。我认为这会解决你的问题。
try to delete the width and only use max-width. I think that would solve your problem.
400px太宽，非视网膜 iPhone 的宽度为320px。如果 Mail 就像 Mobile Safari，它甚至会将 iPhone 4 视为320px宽。您尝试过较小的尺寸吗？400pxis too wide, the non-retina iPhone's are320pxwide. If Mail is like Mobile Safari, it'll even treat it the iPhone 4 as320pxwide. Have you tried smaller sizes?