CSS: Bild als übergeordnetes Element füllen, Größe des übergeordneten Elements jedoch nicht ändern
Posted: 11 Jan 2025, 12:52
Ich habe eine Bildergalerie und alle Bilder sind quadratisch. Die Bilder befinden sich in ihren Divs und einem großen Div mit der flexiblen Anzeige, um alle Divs als übergeordnetes Element zu verwenden. Ich möchte, dass die Bilder ihr übergeordnetes Div ausfüllen, sie aber nicht vergrößern.
UPDATE: Ich habe auf dieser Website gesehen, dass die Eigenschaft „flex-grow“ NICHT zur (nutzbaren) Breite von beiträgt das Element. Weitere Erklärungen finden Sie auf der Website, aber das bedeutet, dass ich etwas anderes als Flex-Grow verwenden muss, um meine übergeordneten Divs auf die Breite des oberen Divs zu bringen.
Außerdem möchte ich kein festes Div Anzahl der Artikel in einer Zeile!! Ich möchte, dass die Elemente immer breiter werden, wenn Sie das Fenster vergrößern, bis zu einem Punkt, an dem Sie die Elemente dann verkleinern und eins von unten zur Zeile darüber hinzufügen.
Hier ist was ich habe:
Hier ist was ich will:
Hier ist mein Code:
Hat jemand eine Idee?
UPDATE: Ich habe auf dieser Website gesehen, dass die Eigenschaft „flex-grow“ NICHT zur (nutzbaren) Breite von beiträgt das Element. Weitere Erklärungen finden Sie auf der Website, aber das bedeutet, dass ich etwas anderes als Flex-Grow verwenden muss, um meine übergeordneten Divs auf die Breite des oberen Divs zu bringen.
Außerdem möchte ich kein festes Div Anzahl der Artikel in einer Zeile!! Ich möchte, dass die Elemente immer breiter werden, wenn Sie das Fenster vergrößern, bis zu einem Punkt, an dem Sie die Elemente dann verkleinern und eins von unten zur Zeile darüber hinzufügen.
Hier ist was ich habe:
Hier ist was ich will:
Hier ist mein Code:
Code: Select all
.ImagesContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .25rem;
margin-top: 1rem;
width: 100%;
}
.ImagesContainer img {
width: 20vw;
min-width: 200px;
margin: 5px;
transition-duration: 200ms;
}
.ImagesContainer div {
background-color: red;
flex-grow: 1;
}Code: Select all
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
Hat jemand eine Idee?