webentwicklung-frage-antwort-db.com.de

CSS GRID IMAGE GALLERY: Wie kann ich die Größe aller Bilder ändern und dieselbe Entfernung einhalten?

Versuchen Sie einfach, eine einfache Bildergalerie mit einem CSS-Raster von 3 x 3 zu erstellen. Ich dachte, die Verwendung eines Containers mit den folgenden CSS-Stilen würde alle gleich groß sein:

.portfolio {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px; 
  justify-content: center;
  padding: 10%;
}

Alle Bilder werden jedoch in meinem Browser überlappend und in verschiedenen Größen angezeigt. Jetzt kann ich den langen, sehr unordentlichen Ansatz ergreifen und anfangen, alles neu zu dimensionieren, schätze ich. Aber gibt es keine einfache Möglichkeit, alle zu verkleinern, um gleich zu sein?

4
John C.

Ich verstehe, dass CSS Grid eine neue Art ist, Dinge zu tun, und ich schätze Ihre Bemühungen, neue Dinge auszuprobieren. Zunächst möchte ich Ihnen empfehlen, dieses kostenlose Training mit CSS-Grid CSS Grid-Tutorial durchzugehen. Dies würde Ihnen eine grundlegende Vorstellung über die gesamte Syntax geben.

Zweitens: Wenn Sie mit den Konzepten vertraut sind, denke ich, dass dies (CSS-Gittertricks) der beste Leitfaden für Sie ist, um tiefer in das Thema einzusteigen.

Kommen Sie jetzt zu Ihrer Frage. Ich habe das Snippet angehängt, das im Grunde eine Portfolio-Sache darstellt, bei der die Bilder in die jeweiligen Raster eingefügt werden.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Document</title>
    <style>
        .portfolio {
            display: grid;
            grid-template-rows: 150px 150px 150px;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20px;

            grid-template-areas: "img1 img2 img3 img4" "img5 img6 img7 img8" "img9 img10 img11 img12";
        }

        .image1 {
            grid-area: img1;
            text-align: center;
        }

        .image2 {
            grid-area: img2;
            text-align: center;
        }

        .image3 {
            grid-area: img3;
            text-align: center;
        }

        .image4 {
            grid-area: img4;
            text-align: center;
        }

        .image5 {
            grid-area: img5;
            text-align: center;
        }

        .image6 {
            grid-area: img6;
            text-align: center;
        }

        .image7 {
            grid-area: img7;
            text-align: center;
        }

        .image8 {
            grid-area: img8;
            text-align: center;
        }

        .image9 {
            grid-area: img9;
            text-align: center;
        }

        .image10 {
            grid-area: img10;
            text-align: center;
        }

        .image11 {
            grid-area: img11;
            text-align: center;
        }

        .image12 {
            grid-area: img12;
            text-align: center;
        }

        .fit {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="portfolio">

        <div class="image1">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image2">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image3">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image4">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image5">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image6">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image7">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image8">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image9">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image10">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image11">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image12">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>

    </div>

</body>

</html>

Jetzt können Sie damit herumspielen, indem Sie die Größe der Zeilen oder Spalten ändern (je nach Anwendungsfall erforderlich). Ein weiterer Punkt, den ich hinzufügen möchte, ist, anstatt Ausrichtungselemente zu verwenden: center. Wenn Sie gerne mit Abstand spielen, können Sie es immer mit grid-template-areas versuchen, indem Sie . . geben, wo immer dies erforderlich ist.

Die Möglichkeiten mit CSS-Rastern sind erstaunlich. Einfach mal ausprobieren. Und hoffe, die Lösung hat geholfen.

1
Akshay L

Standardmäßig wird die Größe von img nicht geändert, um sie an die Containergröße anzupassen.

Sie können dieses Ergebnis mit einem Zwischen-div erhalten, um die Bilder zu enthalten, und die maximalen Abmessungen für sie festlegen

.portfolio {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px; 
}

.item img {
    max-height: 100%;
    max-width: 100%;
}
<div class="portfolio">
    <div class="item">
    <img src="https://i.stack.imgur.com/IXg7m.jpg"/>
    </div>
    <div class="item">
    <img src="https://i.stack.imgur.com/IXg7m.jpg"/>
    </div>
</div>
0
vals

Das macht den Trick für mich. Die Bilder müssen jedoch quadratisch sein, damit dies ordnungsgemäß funktioniert.

Irgendwie komisch, aber es funktioniert in Chrome, Firefox und Edge (IE ist kein Fan).

Codepen

ul {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, minmax(1px, 100%));
    padding-left: 0;
    list-style: none;
}

img {
  width: 100%;
}
<ul>
    <li><img src="https://via.placeholder.com/350x150" alt="image"></li>
    <li><img src="https://via.placeholder.com/300" alt="image"></li>
    <li><img src="https://via.placeholder.com/150x300" alt="image"></li>
    <li><img src="https://via.placeholder.com/147" alt="image"></li>
    <li><img src="https://via.placeholder.com/200" alt="image"></li>
    <li><img src="https://via.placeholder.com/150" alt="image"></li>
</ul>
0
Bjørnar Hagen