CSS-Verankerung von Text in der Bildecke ⇐ HTML

[Anonymous]

Ich versuche, ein responsives Design zu erstellen, bei dem Bilder entsprechend dem Ansichtsfenster skaliert werden. Je nachdem, welche Breite oder Höhe das Bild einschränkt, überschreitet es niemals das Ansichtsfenster.
Das war ziemlich einfach zu erreichen, aber jetzt habe ich das Problem, dass der linksbündige Titel über den Bildern natürlich nicht dem zentrierten Bild folgt, sondern stattdessen am Seitenrand klebt. Ich habe versucht, mit allen möglichen berechneten Innenabständen und anderem Kram zu experimentieren, aber bisher komme ich nicht dahinter.
Idealerweise würde ich gerne ein Feld entsprechend dem Ansichtsfenster skalieren und dieses Feld mittig ausrichten und dann ein Bild in voller Breite im Feld und den linksbündig ausgerichteten Titel darüber haben.
Hier ist, was ich bisher habe, entschuldigen Sie das grobe CSS.
Code:

Code: Select all

/* 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;
}

Code: Select all

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