Адаптивное изображение

Здесь вы узнаете, как сделать адаптивное изображение при помощи CSS.

Адаптивное изображение автоматически подстраивается под размер экрана.

Измените размер браузера, чтобы увидеть эффект адаптации изображения:

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

Шаг 1) Добавляем HTML:

<img src="//msiter.ru/nature.jpg" alt="Природа" class="responsive">

Шаг 2) Добавляем CSS:

Если вы хотите, чтобы изображение при изменении размера браузера увеличивалось и уменьшалось, то установите CSS свойству width значение 100% и свойству height значение auto:

.responsive {
  width: 100%;
  height: auto;
}

Если вы хотите, чтобы изображение при изменении размера браузера только уменьшалось, но никогда не увеличивалось больше своего оригинального размера, то используйте свойство max-width: 100%:

.responsive {
  max-width: 100%;
  height: auto;
}

Если вы хотите ограничить адаптивность изображения каким-то размером, то используйте свойство max-width с нужным значением в пикслях:

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}