iOS Mail中的图像尺寸减小

Question

我正在为应用创建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>

更新：以下是它的外观示例。我不希望它延伸到屏幕之外

Answer 1

尝试删除宽度并仅使用max-width。我想这可以解决你的问题。

Answer 2

400px太宽，非视网膜iPhone的宽度为320px。如果Mail就像Mobile Safari，它甚至会将iPhone 4视为320px宽。你尝试过较小的尺寸吗？