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

узнайте, как использовать CSS для создания адаптивного изображения.

адаптивное изображение автоматически调整为 размер экрана.

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

Свет

просмотрите эффект

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

первый шаг - добавить HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

второй шаг - добавить 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;
}

попробуйте сами

соответствующие страницы

Учебник:CSS изображение

Учебник:CSS для responsive web design