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

  alexei 12/12/2021 - 09:57

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


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

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

Природа

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

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


<img src="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;
}

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

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


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