CSS-привязка текста к углу изображения ⇐ Html

[Anonymous]

Я пытаюсь создать адаптивный дизайн, чтобы изображения масштабировались в соответствии с областью просмотра, в зависимости от того, какая ширина или высота области просмотра ограничивает изображение, оно никогда не выходит за пределы области просмотра.
Этого было довольно легко добиться, но теперь у меня проблема в том, что заголовок изображений, выровненный по левому краю, конечно, не следует за изображением по центру, а вместо этого прилипает к краю страницы. Я пробовал экспериментировать со всевозможными вычисляемыми отступами и другим мусором, но пока не могу в этом разобраться.
В идеале мне хотелось бы масштабировать блок в соответствии с областью просмотра и выравнивать его по центру, а затем иметь изображение во всю ширину внутри блока и заголовок, выровненный по левому краю.
Вот что у меня получилось, извините за грубый CSS.
Код:

Код: Выделить всё

/* Create 1 column that floats */

.column {
float: center;
width: 100%;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Add a card effect for articles */

.card {
background-color: var(--bg-color);
padding: 1vw;
margin-top: 1vw;
cursor: pointer;
width: 100%;
border-style: none;
}

.card h3 {
color: var(--text-color);
font-family: 'Lato', sans-serif;
font-size: 3vw;
text-align: left;
margin-left: 1.5vw;
margin-bottom: 0vw;
margin-top: 0vw;
}

.card img {
display: block;
width: auto;
height: auto;
max-width: 95vw;
max-height: 75vh;
margin-left: auto;
margin-right: auto;
padding: 1vw;
}

Код: Выделить всё

[url=page.html]
Image Title
[img]https://via.placeholder.com/1920x1080.jpg[/img]
             alt="Image Title">
[/url]

Подробнее здесь: https://stackoverflow.com/questions/662 ... age-corner