Уменьшение размера изображения в iOS Mail - PullRequest
1 голос
/ 23 апреля 2011

Я создаю почтовый шаблон 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>

ОБНОВЛЕНИЕ: Вот пример того, как это выглядит. Я не хочу, чтобы он выходил за пределы экрана

enter image description here

Ответы [ 2 ]

4 голосов
/ 26 апреля 2011

попробуйте удалить ширину и использовать только максимальную ширину.Я думаю, что это решит вашу проблему.

0 голосов
/ 29 апреля 2011

400px слишком широкий, iPhone без сетчатки имеет ширину 320px. Если Mail похож на Mobile Safari, он даже будет воспринимать iPhone 4 как 320px в ширину. Вы пробовали меньшие размеры?

...