So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw

So implementieren Sie eine adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw

Im Webdesign stoßen wir häufig auf Situationen, in denen Bilder an die Bildschirmgröße angepasst werden müssen. Um dieses Ziel zu erreichen, stellt CSS eine leistungsstarke Einheit bereit – die Viewport-Einheit. Dabei stellt vmin den Prozentsatz der kleineren Ansichtsfensterbreite und vw den Prozentsatz der Ansichtsfensterbreite dar.

Wir können diese beiden Einheiten also verwenden, um den Effekt der adaptiven Bildgröße zu erzielen. Im Folgenden werden die spezifische Implementierungsmethode sowie die entsprechenden Codebeispiele vorgestellt.

1. Verwenden Sie vmin, um die Breite und Höhe des Bildes festzulegen.

Zuerst müssen wir dem Bild ein festes Seitenverhältnis geben und dann die Einheiten vmin verwenden, um die Breite und Höhe des Bildes festzulegen. Hier ist ein einfaches Beispiel:

<style>
    .image-container {
        width: 90vmin;
        height: 90vmin;
        max-width: 90vw;
        max-height: 90vw;
    }

    .responsive-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="image-container">
    <img src="example.jpg" alt="Example Image" class="responsive-image">
</div>

Im obigen Code ist .image-container ein Div, das das Bild umschließt. Die Breite und Höhe sind im Stil auf 90 vmin festgelegt, wodurch sichergestellt wird, dass das Seitenverhältnis des Bildes unverändert bleibt . . .responsive-image ist die Klasse des Bildes. Durch Festlegen der Breite und Höhe auf 100 % füllt das Bild den gesamten Container. Das Attribut „object-fit: cover;“ ermöglicht es dem Bild, den gesamten Container ohne Verformung vollständig auszufüllen.

2. Verwenden Sie vw, um die Breite des Bildes festzulegen

Eine andere Methode besteht darin, die vw-Einheit zu verwenden, um die Breite des Bildes direkt festzulegen. Es ist jedoch zu beachten, dass diese Methode dazu führen kann, dass das Seitenverhältnis des Bildes beeinträchtigt wird unausgeglichen. Das Folgende ist ein Beispielcode:

<style>
    .responsive-image {
        width: 90vw;
        max-width: 100%;
        height: auto;
    }
</style>

<img src="example.jpg" alt="Example Image" class="responsive-image">

Im obigen Code legt die Klasse .responsive-image die Breite direkt auf 90 vw fest, und das Attribut max-width: 100 % kann sicherstellen, dass das Bild das Ansichtsfenster auf einer kleinen Fläche nicht überschreitet Bildschirm. Höhe: Automatisch ermöglicht die automatische Anpassung der Bildhöhe an Änderungen in der Breite, wobei das ursprüngliche Seitenverhältnis beibehalten wird.

Zusammenfassung

Das Obige ist eine Methode zum Implementieren der adaptiven Bildgröße mithilfe der CSS-Ansichtsfenstereinheiten vmin und vw. Durch den rationalen Einsatz dieser beiden Einheiten können wir Bilder problemlos automatisch an unterschiedliche Größen auf verschiedenen Bildschirmen anpassen und das Benutzererlebnis von Webseiten verbessern. Wenn Sie diese Methode verwenden, passen Sie sie bitte an die tatsächliche Situation an und achten Sie auf die Kompatibilität. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!