Wie kann man mithilfe von CSS dafür sorgen, dass Bilder gemeinsam die Breite eines Containers ausfüllen und gleichzeitig ⇐ CSS

[Anonymous]

Ich versuche, ein Layout zu erstellen, in dem eine Reihe von Bildern:

• in einer einzelnen Zeile angezeigt werden.
• Ihre individuellen Seitenverhältnisse beibehalten (keine Verzerrung).
• Alle Bilder die gleiche Höhe haben.
• Gemeinsam die gesamte Breite des übergeordneten Containers ausfüllen, ohne Lücken zu hinterlassen oder überzulaufen.
• Die Höhe der Bilder (und der Container) sollten sich dynamisch anpassen, sodass alle Bilder horizontal passen.

Ich verstehe, dass flex-grow oder width: auto verwendet werden kann, um die Breiten zu steuern, aber die Bilder haben entweder unterschiedliche Höhen (aufgrund ihrer Seitenverhältnisse) oder Füllen Sie nicht die gesamte Breite des übergeordneten Elements aus.
Zum Beispiel:

Code: Select all

[img]https://placehold.co/300x400[/img]
[img]https://placehold.co/400x300[/img]
[img]https://placehold.co/500x300[/img]

• Der Container sollte 100 % des verfügbaren horizontalen Platzes einnehmen.
• Die img-Elemente sollten die gleiche Höhe haben und ihre Breiten sollten sich proportional anpassen, um ihre Seitenverhältnisse beizubehalten.
• Die Höhe der Bilder sollte dynamisch bestimmt werden, sodass alle Bilder horizontal in den Container passen.

Wie kann ich dieses Layout erreichen? Ich brauche eine reine CSS-Lösung.
Was ich versucht habe:

• Flex-Grow- und Flex-Shrink-Eigenschaften verwenden, aber dadurch haben die Bilder unterschiedliche Höhen.
• Festlegen einer festen Höhe für den Container, aber diese passt sich nicht dynamisch an.

Jede Anleitung oder Beispiele wäre sehr dankbar!