Ein Gitter von Logos in Quadraten

Erstellen des Magazin -Logo -Gitter -Layouts: Detaillierte Erläuterung von CSS -Gitterspitzen

In diesem Artikel werden Sie mithilfe von CSS -Raster ein flexibles, reaktionsschnelles Magazin -Logo -Raster -Layout erstellen. Dieses Layout wird häufig verwendet, um Spender, Sponsoren oder Produktbenutzer anzuzeigen. Die Verwendung von Quadraten kann logos unterschiedlicher Größen, Anteile und visuellen Gewichte effektiv verarbeiten, um Layout -Verwirrung zu vermeiden.

1. Gitterstruktur

Verwenden Sie Emmet, um schnell HTML -Strukturen zu erstellen:

 <code>.grid>div*5>img</code>

Drücken Sie die Registerkarte und erweitern Sie sie als:

<div class="grid">
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
</div>

2. Grundlagen CSS Grid

Flexible Säulentechnologie anwenden:

 .Netz {
  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (200px, 1fr));
  Raster-Lack: 1Rem;
}

Dies erstellt nicht nur flexible Spalten, sondern ermöglicht auch, dass die Anzahl der Spalten automatisch entsprechend der Bildschirmgröße eingestellt wird.

3. Erstellen Sie ein Quadrat

Verwenden Sie Pseudo-Elemente und padding-bottom Tipps nicht, um die Höhe zu erzwingen:

 .grid> div {
  Hintergrund: Schwarz;
  Polsterung: 1Rem;
}

.grid> div :: vor {
  Inhalt: "";
  Padding-Bottom: 100%;
  Anzeige: Block;
}

Dadurch hält die Höhe jedes Netzelements mit seiner Breite überein und bildet ein perfektes Quadrat.

4. Bildüberlagerung und Mitte

Um das Bild mit dem Pseudoelement zu überlagern, verwenden Sie das Raster erneut:

 .grid> div {
  / * ... */
  Anzeige: Grid;
}
.Grid> div :: vor,
.grid> div> img {
  Gitterfläche: 1 / 1/2/2;
}

Dadurch wird sowohl das Pseudo-Element als auch das Bild in der ersten Zelle des Gitterelements implementiert, das Overlay implementiert.

Um das Bild zu zentrieren, setzen Sie width: 100%; height: 100%; und verwenden Sie object-fit: contain;

 .grid> div> img {
  Breite: 100%;
  Höhe: 100%;
  Objekt-Fit: enthält;
}

5. Anomalie der Widerstandsgrößenanpassung

Es ist zu beachten, dass das Bild beim Ziehen des Bildes verformen kann.

6. Verwenden Sie absolute Positionierungsalternativen

Wenn die Drag -Ausnahme ein Problem ist, kann die absolute Positionierung verwendet werden:

Methode 1:

 .grid> div> img {
  Position: absolut;
  Max-Breite: 100%;
  Top: 0;
  unten: 0;
  Rechts: 0;
  links: 0;
  Rand: Auto;
}

Methode 2:

 .grid> div> img {
  Position: absolut;
  Max-Breite: 100%;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
}

Beide Methoden können das Problem der Drag & Drop -Ausnahmen lösen.

Video -Tutorial

(Der Videolink sollte hier eingefügt werden und im Originaltext nicht bereitgestellt werden)

Mit den oben genannten Schritten können Sie problemlos ein flexibles und reaktionsschnelles Magazin -Logo -Gitterlayout erstellen. Wählen Sie die Zentralmethode des Bildes aus, das Ihren Bedürfnissen entspricht, um die beste Benutzererfahrung zu gewährleisten.

Das obige ist der detaillierte Inhalt vonEin Gitter von Logos in Quadraten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!