Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS

Voraussetzung: content="width=750"

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

Das Wirkungsdiagramm sieht wie folgt aus:

Bedarfsanalyse

Höhe und Breite:

1 Bild [Breite 320, Höhe 320] [2-fache Entwurfsgröße]
Für 2 Bilder [Breite 332, Höhe 332]
3 Bilder, 4 Bilder, 6 Bilder, 7 Bilder, 9 Bilder [Breite 220, Höhe 220]
Bei 5 oder 8 Bildern: [Das 4. und 5. Bild haben eine Breite und Höhe von 332], [der Rest hat eine Breite und Höhe von 220]

Abstand:

Wenn zwei Bilder vorhanden sind, hat das letzte Bild nur einen linken Rand.
Bei 3 Blättern werden die linken und rechten Ränder des zweiten Blattes
Wenn 4 Bilder vorhanden sind, haben [das zweite Bild] und [das letzte Bild] nur Ränder nach links und [3, 4] haben Ränder nach oben.
Wenn es 5 Fotos gibt, hat das letzte Foto nur einen linken Rand.
Bei 6 oder 7 Fotos haben das 2. und 4. Foto einen linken und rechten Rand, und ab dem 4. Foto hat das obere
Bei 8 Bildern sind die Ränder links und rechts für das 2. und 4. Bild. Ab dem 4. Bild ist oben ein Rand, beim letzten Bild nur noch links.
Bei 9 Blättern haben [das 2., 4. und 8. Blatt] einen linken und einen rechten Rand

Abgerundete Ecke 10:

Wenn es 1 Bild gibt, haben [alle] abgerundete Ecken
2 Bilder, 3 Bilder - [1. Bild oben links, unten links], [letztes Bild oben rechts, unten rechts]
Wenn es 4 Bilder gibt, [1. Bild, oben links], [2. Bild, oben rechts], [3. Bild, unten links], [letztes Bild, unten rechts]
Bei 5 Bildern: [1. Bild oben links], [3. Bild oben rechts], [4. Bild unten links], [letztes Bild unten rechts]
Bei 6 Bildern: [1. Bild oben links], [3. Bild oben rechts], [4. Bild unten links], [letztes Bild unten rechts]
Wenn es 7 Bilder gibt, [1. Bild, oben links], [3. Bild, oben rechts], [7. Bild, unten links, unten rechts]
Bei 8 Bildern: [1. Bild oben links], [3. Bild oben rechts], [7. Bild unten links], [letztes Bild unten rechts]
Bei 9 Bildern: [1. Bild oben links], [3. Bild oben rechts], [7. Bild unten links], [letztes Bild unten rechts]

Induktion

Wir alle haben in der Mittelschule das Induktionsverfahren der Mathematik gelernt. Dabei wird zuerst herausgefunden, ob eine Aussage wahr ist, wenn n=1 ist. Dann wird angenommen, dass sie wahr ist, wenn n=k ist. Anschließend wird nachgewiesen, dass sie auch wahr ist, wenn n=k+1 ist. Damit ist bewiesen, dass die Aussage wahr ist, wenn n=k [k=irgendeine reelle Zahl].

Code

<div Klasse="Raster-Bildbox">
    <van-image class='grid-img' v-for="Wert in data.photo" :key="Wert" fit="cover" :src="Wert" />
</div>

.grid-img{

  /**
  Breite und Höhe 1. 3n+1 und es ist das vorletzte Bild 2. 3n+1 und es ist das letzte Bild In beiden Fällen sollten die Breite und Höhe des Bildes 320 betragen;
      Die verbleibenden zwei Fälle sind:
    3. Wenn nur ein Bild vorhanden ist, betragen Breite und Höhe 320;
    4. In anderen Fällen und Indizes betragen Breite und Höhe beide 220;
  */
  Anzeige: Inline-Block;
  Breite: 220px;
  Höhe: 220px;
  &:Einzelkind{
    Breite: 320px;
    Höhe: 320px;
  }

  &:n-tes-Kind(3n+1):n-letztes-Kind(2),
  &:n-tes-Kind(3n+2):letztes-Kind{
    Breite: 332px;
    Höhe: 332px;
  }

  /**
  Abstand/Layout*/

  &:n-tes-Kind(3n+2){
    Rand: 0,6px;
  }
  &:n-tes-Kind(n+4){
    Rand oben: 6px;
  }

  &:erstes-Kind{
    Rahmen oben links – Radius: 10px;
  }

  &:letztes-Kind{
    Rand rechts: 0;
    Rahmen unten rechts – Radius: 10px;
  }

  /**
  Abgerundete Ecken*/

  //Abgerundete Ecke unten links: das erste &:nth-child(3n+1) in der letzten Reihe {
    &:letztes Kind,
    &:n-tes-letztes-Kind(2),
    &:n-tes-letztes-Kind(3){
      Rahmen unten links – Radius: 10px;
    }
  }

  //Vier Layouts verarbeiten //Den zweiten Rand vergrößern, um den dritten in die nächste Zeile zu schieben &:nth-child(2):nth-last-child(3){
    Rand rechts: 220px;
  }
  //Setze die zweite abgerundete Ecke zurück &:nth-child(2):nth-last-child(3){
    Rahmen oben rechts – Radius: 10px;
  }

  //Den dritten Rand und Radius zurücksetzen
  &:n-tes-Kind(3):n-tes-letztes-Kind(2){
    Rand oben: 6px;
    Rand rechts: 6px;
    Rahmenradius: 0 0 0 10px;
  }
  //Setze die vierte abgerundete Ecke zurück &:nth-child(4):last-child{
     Rahmenradius: 0 0 10px 0;
  }
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS zur Implementierung eines Neun-Raster-Layouts für dynamische Bilder. Weitere relevante Inhalte zum CSS-Neun-Raster-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!