Wie kann die Höhe eines Rasters so eingeschränkt werden, dass sie der Höhe des Textinhalts und nicht einem übergroßen Bi ⇐ CSS

[Guest]

Ich habe ein CSS-Raster mit zwei Spalten: eine enthält Text und die andere ein Bild. Das Problem besteht darin, dass die Höhe des Rasters durch das Bild bestimmt wird, das größer als der Text ist. Ich möchte stattdessen, dass die Höhe des Rasters der Höhe des Textes folgt.

Code: Select all

.grid {
display: grid;
grid-template-columns: 1fr 1fr;

gap: 1em;
}

.image-container img {
max-height: 100%;
width: 100%;
height: auto;
}

.text {
background: lightblue;
}

Code: Select all

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.

[img]https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg[/img]

Ich könnte dieses Problem lösen, indem ich dem Bild eine absolute Position hinzufüge wird aus dem Inhaltsfluss entfernt. Aber ich denke, dass das Grid-Layout-System etwas bietet, um dies nativ zu tun. Gibt es?
Hier ist eine Lösung mit absoluter Position:

Code: Select all

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}

.image-container {
position: relative;
}

.image-container img {
position: absolute;
max-height: 100%;
width: 100%;
height: auto;
object-fit: cover;
}

.text {
background: lightblue;
}

Code: Select all

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.

[img]https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg[/img]