Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

imsail · 19. Oktober 2023

Ich habe eine Reihe von Bildern in einem Ratespiel, wobei die Anzahl der Bilder zwischen 2 und 5 liegen kann. Bei mehr als 4 Bildern müssen die Bilder verkleinert werden, damit sie in den gleichen Raum passen, daher Flexbox.

Darüber hinaus sind diese Bilder fast alle 88 x 64 Pixel groß, einige ältere Bilder haben jedoch eine etwas geringere Breite. Diese Bilder stammen von einer API, ich kann sie nicht ändern.

Das Problem dabei ist, dass sich die Elemente verschieben, wenn ich das Vorlagenbild „Leerer Steckplatz“ durch ein älteres Bild ersetze, weil eines jetzt etwas kleiner ist.

Meine Lösung hier besteht darin, jedes Bild in einen Container zu legen, um eine Größe von 88 x 64 Pixel zu erzwingen, und Flexbox damit umgehen zu lassen.

Das ist fast perfekt, AUSSER wenn die Behälter in der Flexbox schrumpfen, ändert sich die Breite, aber die Höhe ändert sich nicht. Die Höhe bleibt bei 64 Pixel, wenn ich möchte, dass sie proportional zur Breite verkleinert wird. Wie kann ich das erreichen?

MrMurphy · 19. Oktober 2023

Ohne den Quelltext (HTML und CSS) sowie die Bilder können wir dir nur ganz allgemein helfen und auch nicht ausprobieren, ob unsere Lösungen funktionieren.

Ich würde zwei Möglichkeiten ausprobieren:

a) Die Bilder zu Blockelementen machen und ihnen ein max-width mit auf den Weg geben

oder

b) eine geeignete Einheit wie vw verwenden.

Eventuell ist auch CSS-Grid geeigneter als Flexbox.

Sempervivum · 19. Oktober 2023

Versuche ob das CSS in dieser Demo dein Problem löst (wobei ich hoffe, dass ich dein Absicht richtig verstanden habe):

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Dynamic Images</title>
    <style>
        .wrapper {
            display: flex;
        }

        .wrapper img {
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
            /* Die Bilder haben per Default ein min-width und min-height
            von auto was sie daran hindert, zu schrumpfen.
            Wir müssen deshalb beides reduzieren. */
            min-width: 0;
            min-height: 0;
            border: 2px solid lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img src="images/88x64.jpg">
        <img src="images/64x64.jpg">
        <img src="images/88x64.jpg">
        <img src="images/64x64.jpg">
        <img src="images/88x64.jpg">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum · 19. Oktober 2023

PS: Nachdem ich deine Frage genauer gelesen habe, habe ich bemerkt, dass ich deine Absicht doch nicht richtig verstanden habe: Du möchtest auch für die schmaleren Bilder eine Breite von 88px erzwingen, d. h. die selbe wie die der breiteren, nicht wahr?

Sempervivum · 19. Oktober 2023

Neuer Versuch, ich habe aspect-ratio und object-fit verwendet:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Dynamic Images</title>
    <style>
        .wrapper {
            display: flex;
        }

        .wrapper figure {
            flex-basis: 88px;
            flex-grow: 0;
            flex-shrink: 1;
            aspect-ratio: 88/64;
            margin: 0;
            border: 2px solid darkgray;
        }

        .wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <figure>
            <img src="images/88x64.jpg">
        </figure>
        <figure>
            <img src="images/64x64.jpg">
        </figure>
        <figure>
            <img src="images/88x64.jpg">
        </figure>
        <figure>
            <img src="images/64x64.jpg">
        </figure>
        <figure>
            <img src="images/88x64.jpg">
        </figure>
    </div>
</body>

</html>

Alles anzeigen

Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

Jetzt mitmachen!

Teilen