Как сделать тянущиеся изображения в HTML?

Question

[yupic]

Помогите сверстать HTML страницу.
Есть статья, которая содержит изображения. Статья может просматриваться как на большом мониторе, так и на телефоне с разрешением 800x480.
Чтобы статья нормально выглядела на большом мониторе, всю статью заключаю в div с максимальной шириной 800px.
Но изображения могут быть шире 800px и при возможности должны отображаться в своём полном размере.

Требования более формально:

1. Если статья просматривается на большом экране, изображения должны быть своей реальной ширины, превышающей 800px.
2. Если окно браузера уменьшается до ширины менее 800px или статья просматривается на телефоне, то изображения должны масштабироваться по ширине экрана.
3. Статья отправляется в виде электронного письма, поэтому нельзя использовать скрипты и весь CSS должен быть встроен в HTML.

Как этого добиться? Можно считать, что известны размеры изображений, а значит их можно указать в max-width и max-height.

Вот шаблон статьи, который надо модифицировать:

<div style="max-width: 800px;">
  <p>
    Какой-то текст. Какой-то текст.
  </p>

  <p id="p_img">
    <img id="wide_img" src="/img.jpg" alt="Изображение размером 1024x768"/>
  </p>

  <p>
    Какой-то текст. Какой-то текст.
  </p>
</div>

Для решения поставленной задачи разрешено добавлять стили к #p_img и #wide_img и вставлять дополнительные теги вокруг #wide_img.

Пробовал добавить в #p_img style=«width: 100%» и в #wide_img style=«width: 100%;», но в этом случае ширина изображения не превышает 800px, что не удовлетворяет требованию 1.

Comments

[yupic]

Я не силён в HTML вёрстке, но думаю решение должно выглядеть как-то так:
img заключается в div, ширина этого div устанавливается равной ширине экрана, а max-width равным ширине изображения.
Весь вопрос в том, как создать div, который бы располагался в тексте на месте изображения, но при этом не наследовал ширину от первого div'а, а был шириной 100% от окна браузера.

[yupic]

Немного поясню что вообще делаю:
У меня есть сервис, который скачивает статьи с некоторого сайта и шлёт их мне на почту (GMail) и в Evernote. То есть средства просмотра заданы точно, и не требуется строгая вёрстка под любые почтовые клиенты.
Evernote сохраняет полученные письма как заметки.
Читаю полученные статьи в основном через Evernote на десктопе или на Android телефоне.
При чтении на десктопе, Evernote сам масштабирует слишком широкие изображения по ширине окна (хотя это обычно не требуется, так как монитор большой).
При чтении на мобильном, Evernote не масштабирует изображения. Вот и хотелось бы реализовать это самостоятельно.
Мобильный Evernote использует для отображения заметок либо встроенный браузер, либо WebKit (точно не знаю). При этом даже работает какая-то поддержка HTML5 и CSS3, но величин vw и vh, скорее всего нет.

[yupic]

Спасибо всем за комментарии, они натолкнули меня на работающее решение :).

<p style="max-width: 800px;">
  Какой-то текст. Какой-то текст.
</p>

<p id="p_img">
  <img id="wide_img" src="/img.jpg" alt="Изображение размером 1024x768" style="max-width: 1024px; width: 100%;"/>
</p>

<p style="max-width: 800px;">
  Какой-то текст. Какой-то текст.
</p>

То есть, убираем div с max-widht: 800px, и добавляем style=«max-width: 800px;» во все теги p с текстом. Для изображений указываем атрибут style=«max-width: 1024px; width: 100%;».
В этом случае изображения будут равны по ширине корневому элементу письма, но их ширина не будет превышать размер изображения.
Извиняюсь, за то, что ввёл в заблуждение первоначальным шаблоном.

Единственное, что плохо — надо будет вычислять ширину всех изображений, но без этого, похоже, не обойтись.

[krasulya]

Если вы не ограничиваете ширину #p_img, то в стили #wide_img достаточно добавить max-width: 100% и этого будет достаточно. Картинка никогда не станет больше своего начального размера и будет уменьшаться, если родительский блок будет меньше размера картинки.

[yupic]

Огромное спасибо! Всё работает и даже не надо указывать размер каждого изображения.

Таким образом, окончательное, полностью работающее решение:

<p style="max-width: 800px;">
  Какой-то текст. Какой-то текст.
</p>

<p id="p_img">
  <img id="wide_img" src="/img.jpg" alt="Изображение размером 1024x768" style="max-width: 100%;"/>
</p>

<p style="max-width: 800px;">
  Какой-то текст. Какой-то текст.
</p>

Answer 1

[Артур Кох]

Что ж вы сразу не сказали что письмо верстаете? :)
Это категорически меняет вопрос.

Реализовать вашу задачу в принципе невозможно для всех почтовых клиентов и веб-интерфейсов.
Как аргумент: свойство max-width работает чуть не только в gmail. Так что мой совет — проектировать дизайн макет, в котром не будет резиновых картинок.

А так же там не должно быть фоновых изображений, ибо работают они так же далеко не везде.

habrahabr.ru/post/112163/
habrahabr.ru/post/113709/
habrahabr.ru/post/114119/
habrahabr.ru/post/114234/
habrahabr.ru/company/unisender/blog/115962/
habrahabr.ru/post/117613/
habrahabr.ru/post/127266/
habrahabr.ru/post/127403/
habrahabr.ru/post/137978/

Приятного чтения. Все посвящено html письмам.

Comments

[Артур Кох]

От вынесенных CSS тоже надо отказываться. Об этом по ссылку в первом топике.

[Артур Кох]

*по ссылке.

[yupic]

Про вёрстку письма написал, но, согласен, не сразу :), а в формальных требованиях.
У меня не совсем вёрстка писем, подробнее смотрите дополнение к вопросу.

Answer 2

[ertaquo]

А если написать так?

#wide_img
{
  max-width: 100%;
}

Comments

[yupic]

Проверил, не работает, в этом случае ширина изображения на большом экране всегда 800px, а должна быть для данного изображения 1024px.
Я не силён в HTML, но насколько понимаю, ширина изображения устанавливается равной 100% родителя — в данном случае p, а он наследует ширину от div и поэтому его максимальная ширина 800px.

[ertaquo]

А если так?

@media all and (max-width: 800px)
{
  #wide_img
  {
    max-width: 100%;
  }
}

[yupic]

Интересное решение. Как я понимаю, это CSS3.
В браузере (Opera, Chrome) код работает, хотя не совсем так как хотелось бы, но меня, в принципе, и так бы устроило. Но дело в том, что верстаю письмо и в нём тег style не заработал. Можно ли подобные условия как-нибудь вписать в атрибут style тега img?
Что не так:
При ширине окна менее 800px изображение масштабируется, при ширине больше 800px изображение показывается в полный размер, почти то что надо. Проблема в том, что если просматривать изображение шириной, скажем, 1600px на нетбуке с шириной экрана 1024px, то оно не будет масштабироваться.

Я написал уточнения к вопросу, может быть они вас натолкнут на возможное решение?

[ertaquo]

@media внутрь атрибута style заключить нельзя. Так что боюсь, средствами одного CSS здесь обойтись невозможно.

Answer 3

[Сергей]

Сталкивался с похожей проблемой для стрелочек в карусели в зависимости от разрешения экрана.
Справился с помощью jQuery.

Вот код, но дописать Вам надо будет самим, легко поймете и справитесь:

<script language="JavaScript">
   $(document).ready(function(){ 
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();



    if($(window).width()<900) {
       
    }

$(window).resize(function() {
 if($(window).width()<900) {
       показываем маленькую картинку
    }

 if($(window).width()>=900) {
     показываем большую картинку
    }

});
});

</script> 

Comments

[Сергей]

if($(window).width()<900) {
показываем маленькую картинку.
}

что-то хабр сфильтровал запись.

[Сергей]

Ах, да, плюс в том, что даже при изменении ширины экрана, у меня менялись значения без перезагрузки страницы (было свернутое окошко — загрузили маленькую картинку, развернули окошко — хоба, большая.)

[yupic]

К сожалению, у меня электронное письмо, поэтому JavaScript не доступен.

[Сергей]

Ваша задача технически не реализуема для писем.