создайте страницу, на которой разместите три картинки в тексте таким образом, чтобы при изменений размера окна бразуера картинки перемещались по экрану за своим местом. CSS

Для того чтобы создать страницу с тремя изображениями, которые будут адаптироваться к размеру окна браузера, можно использовать HTML и CSS. Пример кода приведен ниже с пошаговым объяснением.

Шаг 1: Создание HTML-страницы

Создайте файл HTML (например, index.html) и вставьте в него следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивные изображения</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <img src="image1.jpg" alt="Изображение 1" class="responsive">
        <img src="image2.jpg" alt="Изображение 2" class="responsive">
        <img src="image3.jpg" alt="Изображение 3" class="responsive">
    </div>
</body>
</html>

Шаг 2: Создание CSS для адаптивности

Создайте файл CSS (например, styles.css) и вставьте в него следующий код:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80%;
}

.responsive {
    max-width: 30%;
    height: auto;
    margin: 10px; /* Отступы между изображениями */
}

Пояснения к коду:

1. HTML Разметка:

   • Внутри тега <body> мы создаем <div class="container">, который будет содержать все изображения.
   • Каждое изображение обозначается тегом <img>, где src указывает путь к изображению, а alt — альтернативный текст.

2. CSS Стили:

   • * { box-sizing: border-box; margin: 0; padding: 0; } — Сбрасываем стандартные отступы и задаем модель коробки.
   • body — Устанавливается шрифт, центруются элементы в пределах экрана, задается минимальная высота и цвет фона.
   • .container — Используем Flexbox для размещения изображений. justify-content: space-around; позволяет равномерно распределить изображения, а flex-wrap: wrap; позволяет им переноситься на следующую строку при уменьшении размера окна.
   • .responsive — Каждое изображение ограничено по максимальной ширине (30% от размера контейнера), это делает их адаптивными и они будут изменять свой размер в зависимости от ширины окна.

Шаг 3: Проверка работы

1. Убедитесь, что у вас есть три изображения с именами image1.jpg, image2.jpg, image3.jpg в той же папке, где находится ваш HTML-файл.
2. Откройте index.html в браузере.
3. Измените размер окна браузера, чтобы убедиться, что изображения перемещаются и адаптируются к изменению размера.

Теперь у вас есть страница с тремя адаптивными изображениями, которые будут правильно размещаться при изменении размера окна!