Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

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

Äh, es scheint, als wäre das chinesische Neujahr gerade vorbei.

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 beide größer als der Container sind, behalten Sie das Seitenverhältnis bei und füllen Sie den Container mit Breite oder Höhe

   <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.

Dieser Effekt ist viel komfortabler

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.

Zum 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.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.