Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Размер изображения для адаптивного веб-дизайна

Одной из важных частей адаптивного веб – дизайна является автоматическое изменение размера изображения так, чтобы оно соответствовало ширине его контейнера. На самом деле сделать это очень легко, все, что вам нужно сделать, это установить соответствующее значение для max-width CSS свойства: img { max-width: 100%; }

картинки css, адаптивный дизайн, веб дизайн, размер изображения

Стили выше не позволяют любому IMG элементу, размещенному на странице сайта становиться шире своего элемента контейнера. Если контейнер является более узким, чем изображение, изображение будет изменено по ширине контейнера.

Но, есть случай, когда эти стили не будут работать. Это происходит , когда IMG элемент имеет определенные width и height значения атрибутов в HTML. В этом случае изображение будет определенной  высоты, которая определена в HTML в то время как его ширина будет регулироваться. Изображение в таком виде будет выглядеть не пропорционально и искаженно.

Самый простой способ избежать этой проблемы не определять width и height атрибуты в HTML для изображений. Но определение этих атрибутов для изображений не бессмысленная вещь, особенно когда они показывают реальные размеры изображений. Разработчики Google рекомендуют определить их из соображений производительности, поскольку это может улучшить скорость рендеринга в браузере.

Итак, если вы решили определить их вам нужно будет улучшить стили выше: все, что вам нужно сделать, так это добавить к ним height: auto;. Теперь стили будут выглядеть следующим образом:

img {

  max-width: 100%;

  height: auto;

}

Эти стили переопределят height атрибут в HTML и позволят изменять высоту изображения пропорционально ее ширине. Откройте демо-страницу и просто попробуйте изменить размер окна браузера, чтобы увидеть что произойдет:

      ДЕМО      

поддержка браузеров

IE7 изменяет размер изображения пропорционально независимо от того, есть или нет какой - либо определенный размер атрибутов в HTML, даже без использования height: auto; в стилях.

IE8 и другие более современные браузеры этого не делают.Для того, чтобы изменить размер изображения должным образом, необходимо обеспечить width в дополнение к height: auto;. К счастью, width: auto; это стиль, который не вызывает каких-либо проблем в других браузерах. Если вы хотите, чтобы эти вещи работали,  просто используйте эти стили:

img {

  width: auto;

  max-width: 100%;

  height: auto;

}

На этом все. Теперь ваши изображения будут адаптивны к различным размерам экрана и пропорционально изменятся по высоте и ширине. Решение подобного вопроса с видео можете посмотреть в статье>>>

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Комментарии: 2

Оставить комментарий
  1. Так что я подумал, не нужно и мучиться. Я тоже тестировал свой блог на разных устройствах и он на них отображается отлично. Всё работает. А вот ие 6 ну никак не хочет отображать его нормально. Ну а что поделать. Не правильно будет отказываться от адаптивного дизайна только потому что его не поддерживает ие.

  2. Классно! Появилось много мыслей, над которыми стоит поразмышлять. Очень порадовали адаптивные шаблоны для WP. Автору спасибо за большой труд.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ