Мобильная версияЯ пытаюсь создать адаптивный дизайн, в котором изображения масштабировались бы в соответствии с областью просмотра, в зависимости от того, какая ширина или высота области просмотра ограничивает изображение, оно никогда не выходит за пределы области просмотра.
Этого было довольно легко добиться, но теперь у меня возникла проблема: заголовок изображений, выровненный по левому краю, конечно, не следует за центральным изображением, а вместо этого прилипает к краю страницы. Я пробовал экспериментировать со всякими разными вычисляемыми отступами и прочим барахлом, но пока не могу в этом разобраться.
В идеале мне хотелось бы масштабировать блок в соответствии с областью просмотра и выравнивать его по центру, а затем располагать изображение во всю ширину внутри блока и заголовок, выровненный по левому краю, над ним.
>
Вот что у меня получилось, извините за грубый CSS.
Код:
/* Создать 1 плавающий столбец */ .столбец { плавающий: центр; ширина: 100%; } /* Очистить числа с плавающей запятой после столбцов */ .row:после { содержание: ""; дисплей: стол; ясно: оба; } /* Добавляем эффект карты для статей */ .карта { цвет фона: var (--bg-color); отступ: 1vw; маржа-верх: 1vw; курсор: указатель; ширина: 100%; стиль границы: нет; } .card h3 { цвет: вар (-текст-цвет); семейство шрифтов: «Lato», без засечек; размер шрифта: 3vw; выравнивание текста: по левому краю; поле слева: 1,5vw; поле-дно: 0vw; маржа-верх: 0vw; } .card изображение { дисплей: блок; ширина: авто; высота: авто; максимальная ширина: 95vw; максимальная высота: 75vh; поле слева: авто; поле справа: авто; отступ: 1vw; Название изображения
