Гибкие изображения

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 66 из 76.

В адаптивном веб-дизайне гибкие изображения автоматически подстраиваются под различные размеры экранов, обеспечивая их отличный вид на всех устройствах. Без гибкости изображения могут быть слишком большими на маленьких экранах или нарушать макет.

Как сделать изображения гибкими:

1. Используйте CSS max-width
Установка max-width: 100% гарантирует, что изображения никогда не будут превышать ширину своего контейнера.

img {
  max-width: 100%;
  height: auto; /* Сохраняет соотношение сторон */
}

2. Используйте единицы измерения Viewport
Вы можете задавать размеры изображений с помощью vw (viewport width), чтобы они масштабировались в зависимости от размера экрана.

img {
  width: 50vw; /* Изображение занимает 50% ширины области просмотра */
}

Задание

Легко

Вам дан HTML-документ с изображением. Ваша задача — сделать изображение адаптивным, чтобы оно подстраивалось под разные размеры экрана.

Напишите CSS-правило, которое выбирает все элементы с классом img-max. Установите для него max-width в значение 100% и height в значение auto.
Напишите CSS-правило, которое выбирает все элементы с классом img-vw. Установите для него width в значение 50vw и height в значение auto.

Шпаргалка

Гибкие изображения автоматически подстраиваются под различные размеры экранов в адаптивном веб-дизайне.

Использование max-width:

img {
  max-width: 100%;
  height: auto; /* Сохраняет соотношение сторон */
}

Использование единиц измерения viewport:

img {
  width: 50vw; /* Изображение занимает 50% ширины области просмотра */
}

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

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>