8 (499) 3-777-413

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

Короткая заметка о том, как сделать изображения на сайте адаптивными (responsive images) с минимумом телодвижений.

Постановка задачи

  1. Ширина изображения не должна превышать ширину родительского контейнера.
  2. Изображение должно сохранять свою исходную ширину на десктопе
  3. На мобильном устройстве изображение должно занимать 100 процентов экрана.

Решение

img {
  max-width: 100%!important;
  width: auto;
  height: auto!important;
}

Если вы используете динамическое наполнение сайта, визуальный редактор может расставлять в теги img аттрибут, явно указывающий ширину и высоту изображения. В таком случае стоит применить media queries.

@media screen and (max-width: 768px) {
	img {
  		max-width: 100%!important;
  		width: auto;
  		height: auto!important;
	}
}

Такой код будет применять стили только на определённых разрешениях экрана.