Wie kann CSS eine einheitliche Bildgröße für Bilder unterschiedlicher Größe gewährleisten?

Erzielen einer einheitlichen Bildgröße für unterschiedliche Bilder mit CSS

Das Erstellen einer ansprechenden Bildergalerie erfordert häufig Bilder von einheitlicher Größe, unabhängig von ihren ursprünglichen Abmessungen . Dies kann eine Herausforderung darstellen, wenn Sie mit Bildern unterschiedlicher Höhe und Breite arbeiten. CSS bietet jedoch eine Lösung, um alle Bilder einheitlich erscheinen zu lassen.

Lösung:

Um die Abmessungen aller Bilder auf 100 x 100 Pixel festzulegen, verwenden Sie das folgende CSS Code:

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Implementierung:

1. Float-Eigenschaft: Dadurch werden Bilder horizontal ausgerichtet und sichergestellt, dass sie nebeneinander angezeigt werden. Erstellen einer Inline-Anordnung.
2. Eigenschaften für Breite und Höhe: Legen Sie die Breite und Höhe explizit auf einen festen Wert fest, in diesem Fall 100 Pixel für beide.
3. object-fit-Eigenschaft: Stellt sicher, dass das gesamte Bild innerhalb der angegebenen Abmessungen sichtbar ist. Es skaliert und schneidet das Bild entsprechend unter Beibehaltung seines Seitenverhältnisses.

Beispiel:

Um dieses Konzept zu veranschaulichen, betrachten Sie den folgenden HTML- und CSS-Code:

<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Dieser Code rendert die Bilder als quadratische Miniaturansichten mit einer einheitlichen Höhe und Breite von 100 Pixeln. Die Bilder werden in der Größe angepasst und zugeschnitten, damit sie in diese Abmessungen passen und gleichzeitig ihre ursprünglichen Proportionen beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann CSS eine einheitliche Bildgröße für Bilder unterschiedlicher Größe gewährleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!