Адаптивные картинки в статьях страницы

[Delat]

Почитав некоторые статьи ещё 2012 года про адаптивные картинки, сложилось понимание, что на тот момент не было ещё единого правила оформления.

В настоящее время существуют сайты с адаптивными картинками в теле страницы, например сайт time.

Собственно, что меня побудило написать этот пост: имеются картинки с разным разрешением и размером, все они отображаются по разному, если уменьшить окно броузера. Что можно сделать, чтобы картинки адаптировались под любое разрешение от 1024px до 1920px?

При разрешении 1024х768 из-за картинки не адаптируется контент, остальное норм.

А здесь картинка меняет свой размер не теряя качество отображения в пределах 1024 - 1920px.

И снова картинка расползалась:

[ShumNo]

быть может + нюансы:

все картинки под максимальное разрешение, то есть если открываем сайт на максимальное разрешение где картинки скажем 700px. Ко всем этим картинкам добавляем ширины и высоту в 100% и на всякий случай ограничиваем максимальную ширину, чтобы не поехало чего случайно. Все.

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

[Delat]

быть может + нюансы:

все картинки под максимальное разрешение, то есть если открываем сайт на максимальное разрешение где картинки скажем 700px. Ко всем этим картинкам добавляем ширины и высоту в 100% и на всякий случай ограничиваем максимальную ширину, чтобы не поехало чего случайно. Все.

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

у меня картинки все разные, то есть размер картинок. Сделать скажем их все разрешением свыше 1920px нет возможности.

А так впрочем я и делал :

height:auto;
max-width:50%;

но как видите на скриншоте, не все картинки масштабируются как надо.

[121990]

Посмотри внимательно. На сайт time.com изображения не изменяют от 1280x800 ++. А вот экраны 1024x768 -- уменьшаются.

Для фоновых изображений указывай только ширину.

Если же рисунок присутствует как элемент изображения, то - http://jsfiddle.net/NMCwj/