CSS implementiert problemlos Container auf Blockebene mit festem Verhältnis

Beim Entwerfen eines H5-Layouts werden Sie normalerweise auf Banner stoßen.

Wenn Sie es beispielsweise im Verhältnis 2:1 anzeigen möchten, sollte das vom Backend zurückgegebene Bild natürlich 2:1 sein. Allerdings ist die Situation häufig nicht zufriedenstellend. Was sollen wir also tun?

Es fühlt sich immer unpassend an, Breite und Höhe auf eine feste Art und Weise zu schreiben

Standardbreite: 100 %; lassen Sie die Höhe adaptiv sein und das Bild wird langsam erweitert (der Produktmanager wird sagen, dass dies eine schlechte Benutzererfahrung ist, aber ich bin ein Benutzer und finde es gut)

Die Methode ist hier

        .banner-wrapper {
            Position: relativ;
            Breite: 100 %;
            Polsterung oben: 50%;
        }

        .banner {
            Position: absolut;
            links: 0;
            oben: 0;
            Breite: 100 %;
            Höhe: 100%;
        }
        
        <div Klasse="Banner-Wrapper">
            <img class="banner" src="./img/portfolio/cabin.png" alt="">
        </div>

Lassen Sie mich erklären

padding-top: 50 %; ist der Schlüssel. Die Verwendung von Prozentwerten zum Schreiben von Padding ist relativ zu seiner Breite (fragen Sie mich nicht, warum das so ist).

Breite: 100 %; Polsterung oben: 50 %; stellt also eine 2:1-Box perfekt dar.

Zum Schluss das gesamte Bild auf

Finden Sie nicht, dass es nach Abschluss der Arbeit ganz einfach zu verwenden ist?

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.