Soll der Bildcontainer seine Höhe basierend auf dem Inhalt des Geschwistercontainers anpassen?
Posted: 23 Jan 2025, 07:38
Ich möchte, dass der .content-container je nach Inhalt so viel Höhe einnimmt, wie nötig, und ich möchte, dass der .image-container seine Höhe dynamisch an den .content-container anpasst.
Das Problem, mit dem ich konfrontiert bin, besteht darin, dass, wenn ich dem .image-Container ein Bild hinzufüge, die Höhe des .main-Containers zunimmt und der .content-Container am Ende gedehnt wird, um mit dem übereinzustimmen stattdessen die Höhe des Bildes. Ich benötige das umgekehrte Verhalten: Die Höhe des Bildes sollte sich an die Höhe des .content-Containers anpassen.
Wie kann ich dafür sorgen, dass die Höhe des Bildcontainers DYNAMISCH an die Höhe des Inhaltscontainers angepasst wird? Für jede Hilfe wäre ich dankbar!
Das Problem, mit dem ich konfrontiert bin, besteht darin, dass, wenn ich dem .image-Container ein Bild hinzufüge, die Höhe des .main-Containers zunimmt und der .content-Container am Ende gedehnt wird, um mit dem übereinzustimmen stattdessen die Höhe des Bildes. Ich benötige das umgekehrte Verhalten: Die Höhe des Bildes sollte sich an die Höhe des .content-Containers anpassen.
Wie kann ich dafür sorgen, dass die Höhe des Bildcontainers DYNAMISCH an die Höhe des Inhaltscontainers angepasst wird? Für jede Hilfe wäre ich dankbar!
Code: Select all
[img]https://images.unsplash.com/photo-1464146072230-91cabc968266?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D[/img]
test1
test1
test1
test1
test1
test1
test1
test1
test1
Code: Select all
.main-container {
width: 100%;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.image-container {
flex: 0 0 50%;
background-color: aqua;
}
.image-container img {
height: 100%;
width: 100%;
}
.content-container {
flex: 0 0 50%;
background-color: orange;
}