iOS Mail中的图像尺寸减小(Image size reduction in iOS Mail)

我正在为应用创建HTML邮件模板，模板包含440px宽的图像。

当我在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

最满意答案

尝试删除宽度，只使用max-width。 我认为这可以解决你的问题。

try to delete the width and only use max-width. I think that would solve your problem.