Я создаю почтовый шаблон 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](https://i.stack.imgur.com/NGJ0r.png)