Mehrere Möglichkeiten zur Implementierung bildadaptiver Container mit CSS (Zusammenfassung)

Es gibt häufig Szenarien, in denen das Bild an die Größe des Containers angepasst werden muss.

1. Die img-Tag-Methode

Uns fällt spontan ein, Breite und Höhe auf 100% zu setzen. Schauen wir uns die Wirkung an.

<div Klasse='div1'>
    <img src="./peiqi.png" alt="">
</div>

.div1 {
    Breite: 500px;
    Höhe: 400px;
    Rand: 1px, durchgehend schwarz;
}
.div1 img {
    /*
    Breite: 100 %;
    Höhe: 100 %;
    */
}

Dies ist eine normale Seite (wenn das Bild größer als der Container ist, wird das Bild den Container überschreiten)

.div1 {
    Breite: 500px;
    Höhe: 400px;
    Rand: 1px, durchgehend schwarz;
}
.div1 img {
    Breite: 100 %;
    Höhe: 100 %;
}

Das ist 100% Peggy

Obwohl die Anpassungsanforderungen erfüllt sind, ist das Bild wie in der Abbildung gezeigt verzerrt. Wenn das Bild kleiner als der Container ist und Sie es zur Anpassung zwingen, wird das Bild verzerrt. Handelt es sich um ein einzelnes Bild (Logo, Platzhalterbild etc.), können Sie dieses entsprechend dem Designentwurf weiterentwickeln. Wir stoßen jedoch häufig auf unregelmäßige Bilder, die von der Schnittstelle erhalten werden. Wenn das Bild kleiner als der Container ist, wird es im Allgemeinen horizontal und vertikal zentriert.
Lassen Sie uns die Aufgaben klären:

Wenn die Bildbreite und -höhe kleiner als der Container sind, wird es vertikal und horizontal zentriert. Wenn die Bildbreite und -höhe größer als der Container sind, bleibt das Seitenverhältnis erhalten und die Breite bzw. Höhe wird mit dem Container ausgefüllt.

<div Klasse='div1'>
        <img src="./peiqi.png" alt="">
    </div>
    <div Klasse='div1'>
        <img src="./peiqi2.png" alt="">
    </div>
    <div Klasse='div1'>
        <img src="./peiqi4.jpeg" alt="">
    </div>

.div1 {
        Breite: 500px;
        Höhe: 400px;
        Rand: 1px, durchgehend schwarz;
        Anzeige: Tabellenzelle;
        vertikale Ausrichtung: Mitte;
    }
    .div1 img {
        maximale Breite: 100 %;
        maximale Höhe: 100 %;
        Anzeige: Block;
        Rand: automatisch;
    }

Die Eigenschaft „max-height“ verhindert, dass die Eigenschaft „height“ auf einen Wert festgelegt wird, der größer als „max-height“ ist.
Mit dem Attribut „max-height“ wird die maximale Höhe eines bestimmten Elements festgelegt. Wenn die durch das Attribut „height“ festgelegte Höhe größer ist als die durch dieses Attribut festgelegte Höhe, wird das Attribut „height“ ungültig.

2. Hintergrundbildmethode

.div {
        Hintergrundgröße: enthalten;
 }

Hintergrundgröße: enthalten; erweitert das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passt. Durch die Verwendung der CSS-Eigenschaft „background-size: contain;“ können wir die Situation weiter optimieren, in der die Breite und Höhe des Bildes kleiner als der Container sind.

Oben genannter Code:

  div {
        Höhe: 400px;
        Breite: 500px;
        Rand: 1px tief schwarz;
        Hintergrundwiederholung: keine Wiederholung;
        Hintergrundgröße: enthalten;
        Hintergrundposition: Mitte;
    }
    .div1 {
        Hintergrundbild: URL (./peiqi1.png);
    }
    .div2 {
        Hintergrundbild: URL (./peiqi2.png);
    }
    .div3 {
        Hintergrundbild: URL (./peiqi4.jpeg);
    }

<div Klasse='div1'></div>
<div Klasse='div2'></div>
<div Klasse='div3'></div>

Natürlich hängt letztendlich alles von der Nachfrage und den Anforderungen des Produkts ab.

Damit ist dieser Artikel über verschiedene Möglichkeiten zur Implementierung von bildadaptiven Containern mit CSS abgeschlossen (Zusammenfassung). Weitere relevante Inhalte zu bildadaptiven CSS-Containern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!