Элемент picture и атрибуты srcset/sizes

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 8
Автор
Рек. время прохождения 2 минуты
Упражнений 6
Комментарии 0
Тренажер CSS

Эта серия заданий поможет вам попрактиковаться в стилизации элемента `<picture>` и его содержимого с помощью CSS. Хотя сами атрибуты `srcset` и `sizes` управляют выбором изображения браузером и настраиваются в HTML, понимание того, как стилизовать контейнер `<picture>` и вложенный `<img>`, важно для корректного отображения адаптивных изображений. Вы будете работать с готовым HTML, содержащим элемент `<picture>`, и заполнять пропуски в CSS для достижения нужного визуального результата. Задания варьируются от базового позиционирования и стилизации до использования селекторов для воздействия на изображения внутри `<picture>`.

Список тем

Базовая стилизация элемента

В HTML предоставлен элемент `<picture>` с изображением. Ваша задача - использовать CSS, чтобы элемент `<picture>` вел себя как блочный элемент и занимал всю доступную ширину контейнера. Это стандартная практика для корректного встраивания `<picture>` в поток документа.

CSS
picture {
  input1: block;
  /* Дополнительные стили для наглядности */
  border: 1px dashed #ccc;
  padding: 5px;
}

img {
  /* Стандартные стили для адаптивных изображений */
  max-width: 100%;
  height: auto;
  display: block; /* Убираем лишний отступ под изображением */
}
HTML
<picture>
  <source srcset="https://naytikurs.ru/img/1.png" media="(min-width: 600px)">
  <source srcset="https://naytikurs.ru/img/2.png" media="(min-width: 400px)">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример изображения">
</picture>
Чтобы элемент вел себя как блочный, используйте свойство `display` со значением `block`. Чтобы он занимал всю доступную ширину, можно добавить свойство `width` со значением `100%` или использовать `max-width: 100%;` для вложенного изображения (что часто делается по умолчанию для адаптивности). В данном случае, сосредоточьтесь на свойстве `display` для самого элемента `<picture>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация изображения внутри

Используя CSS, добавьте сплошную черную рамку толщиной 2 пикселя к изображению (`<img>`), которое находится непосредственно внутри элемента `<picture>`. Это покажет, как применять стили к вложенному `<img>` через родительский `<picture>`.

CSS
picture {
  display: block;
}

input1 {
  /* Не меняйте значения рамки */
  border: 2px solid black;
  max-width: 100%;
  height: auto;
  display: block;
}
HTML
<picture>
  <source srcset="https://naytikurs.ru/img/5.png" media="(min-width: 600px)">
  <img src="https://naytikurs.ru/img/6.png" alt="Изображение с рамкой">
</picture>
Используйте селектор потомка (пробел между `picture` и `img`) для выбора элемента `<img>`, который является потомком элемента `<picture>`. Затем примените свойство `border` с необходимыми значениями (толщина, стиль, цвет).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Эффект при наведении на

Сделайте так, чтобы при наведении курсора мыши на элемент `<picture>`, изображение (`<img>`) внутри него становилось полупрозрачным (непрозрачность 50%). Это демонстрирует использование псевдоклассов с `<picture>`.

CSS
picture {
  display: block;
  transition: opacity 0.3s ease; /* Плавный переход для наглядности */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease; /* Плавный переход для наглядности */
}

picture:input1 img {
  /* Не меняйте значение непрозрачности */
  opacity: 0.5;
}
HTML
<picture>
  <source srcset="https://naytikurs.ru/img/7.png 800w" sizes="100vw">
  <img src="https://naytikurs.ru/img/8.png" alt="Изображение с эффектом наведения">
</picture>
Используйте псевдокласс `:hover` для элемента `<picture>`. Затем, используя селектор потомка, выберите вложенный `<img>` и примените к нему свойство `opacity` со значением `0.5`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Ограничение максимальной ширины

В HTML используется элемент `<picture>` с атрибутами `srcset` и `sizes`. Ваша задача - ограничить максимальную ширину самого элемента `<picture>` значением 250 пикселей с помощью CSS. Хотя выбор изображения определяется `srcset`/`sizes` и шириной viewport, ограничение контейнера также влияет на отображение.

CSS
picture {
  display: block;
  border: 1px solid blue; /* Для визуализации границ */
  /* Не меняйте значение ширины */
  input1: 250px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
HTML
<p>Контейнер ниже ограничен 250px:</p>
<picture>
  <!-- Разные источники для разных ширин окна просмотра -->
  <source srcset="https://naytikurs.ru/img/9.png 600w, https://naytikurs.ru/img/1.png 1000w" 
          sizes="(max-width: 372px) 100vw, 50vw">
  <!-- Резервное изображение -->
  <img src="https://naytikurs.ru/img/2.png" alt="Адаптивное изображение">
</picture>
<p>Ширина iframe ограничена 372px, поэтому `sizes` и `max-width` будут взаимодействовать.</p>
Найдите элемент `<picture>` с помощью селектора тега и примените к нему CSS свойство `max-width` со значением `250px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация с определенным классом

В HTML есть два элемента `<picture>`, но только один из них имеет класс `highlighted`. Примените стиль (например, добавьте тень) только к изображению (`<img>`) внутри элемента `<picture>`, у которого есть класс `highlighted`.

CSS
picture {
  display: block;
  margin-bottom: 10px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Применяем стиль только к img внутри picture.highlighted */
input1 {
  /* Не меняйте значение тени */
  box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
HTML
<picture class="highlighted">
  <source srcset="https://naytikurs.ru/img/4.png" media="(min-width: 1px)">
  <img src="https://naytikurs.ru/img/5.png" alt="Выделенное изображение">
</picture>

<picture>
  <source srcset="https://naytikurs.ru/img/6.png" media="(min-width: 1px)">
  <img src="https://naytikurs.ru/img/7.png" alt="Обычное изображение">
</picture>
Используйте селектор класса (`.highlighted`) в комбинации с селектором тега (`picture`) и селектором потомка (`img`). Полный селектор будет выглядеть примерно как `picture.highlighted img`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование селектора атрибута для

В HTML есть два элемента `<picture>`. Один из них имеет пользовательский атрибут `data-type="icon"`. Ваша задача - применить стиль (добавить отступ слева) только к тому элементу `<picture>`, который имеет атрибут `data-type` со значением `icon`.

CSS
picture {
  display: block;
  margin-bottom: 10px;
  border: 1px dashed lightgrey;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Применяем стиль только к picture с атрибутом data-type="icon" */
input1 {
  /* Не меняйте значение отступа */
  margin-left: 20px;
  border-color: green; /* Делаем рамку заметнее */
}
HTML
<picture data-type="icon">
  <source srcset="https://naytikurs.ru/img/8.png" media="(min-width: 1px)">
  <img src="https://naytikurs.ru/img/9.png" alt="Иконка">
</picture>

<picture>
  <source srcset="https://naytikurs.ru/img/1.png" media="(min-width: 1px)">
  <img src="https://naytikurs.ru/img/2.png" alt="Обычное изображение">
</picture>
Используйте селектор атрибута для выбора элемента `<picture>` с конкретным атрибутом и значением. Синтаксис: `element[attribute='value']`. В данном случае это будет `picture[data-type='icon']`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру