.responsive-image { display: block; max-width: 100%; height: auto; }Большое изображение уменьшается на мобильном, но не растягивается без необходимости.
УРОК 75 ИЗ 100
Удерживайте изображение внутри контейнера
Не позволяйте изображению превышать доступную ширину и сохраняйте пропорции.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
max-width: 100% ограничивает используемую ширину контейнером, а height: auto позволяет браузеру вычислять высоту по внутреннему соотношению. display: block убирает базовый промежуток строчного элемента.
.responsive-image { width: 1200px; height: 400px; }Фиксированные размеры могут создать переполнение и исказить изображение.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте display: block, max-width: 100% и height: auto.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Изображение является блочным элементом.
- ○Максимальная ширина равна 100%.
- ○Высота остаётся автоматической.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Процентное ограничение реагирует на контейнер, а автоматическая высота сохраняет внутреннее соотношение.