HTML: So ändern Sie die Größe eines Bildes mit CSS-Containerabfragen!

Wissen Sie, was cooler ist, als beim Erstellen einer Website ein Bild zu verwenden? Wie wäre es, mit HTML und CSS etwas zu erstellen, das wie ein Bild aussieht und sich verhält? Und wissen Sie was? Mit Containerabfragen ist das jetzt ganz einfach. In diesem Beitrag erstellen wir mit HTML und CSS eine Anzeige, die wie ein Bild aussieht.

Dann sorgen wir dafür, dass es sich wie ein Bild verhält, wenn es gestaucht, erweitert und an andere Stellen im Dokument verschoben wird. Ok, schauen wir es uns an!

Ok, wir haben diese Vans-Anzeige in der Seitenleiste der Website, die wir erstellen, und derzeit handelt es sich um ein Bild.

Dies erschwert die Bearbeitung. Ein Designer müsste es aktualisieren und uns ein neues Bild liefern, wenn sich etwas ändern müsste.

Außerdem würden wir wahrscheinlich mehrere Versionen zur Verwendung mit dem Quellsatz benötigen, damit es sowohl auf Displays mit hoher Dichte als auch auf Displays mit niedriger Auflösung scharf aussieht.

Wir haben also die Aufgabe, es in HTML zu konvertieren. Wie können wir das machen?

Einige Nachteile bei der Verwendung von Bildern und Ansichtsfenstereinheiten

Nun, wir könnten wahrscheinlich Ansichtsfenstereinheiten verwenden, aber wir müssten zusätzlichen Code hinzufügen, wenn wir die Anzeige an verschiedenen Orten platzieren würden, wo ihre Abmessungen unterschiedlich wären, da alles auf dem Ansichtsfenster und nicht auf den Containerabmessungen basieren würde.

Wir könnten es also schaffen, aber es könnte etwas chaotisch werden. Stattdessen könnten wir Containerabfragen und Containerabfrageeinheiten verwenden. Containerabfragen ähneln ein wenig Medienabfragen, basieren jedoch auf den Abmessungen eines bestimmten Containers auf der Seite und nicht auf dem gesamten Darstellungsbereich.

Einrichten eines Containers mit der CSS container-type Eigenschaft

Ok, schauen wir uns an, womit wir beginnen.

Hier sieht es also ziemlich gut aus, aber wie verhält es sich, wenn es reagiert?

Äh, die Größe des Textes und der Ränder ändert sich nicht, also braucht es etwas Liebe, denn so wie es aussieht, ist es ziemlich kaputt. Was wir hier bereits tun, ist, dass wir ein aspect-ratio verwenden, das es dem Container ermöglicht, wie ein Bild zu reagieren. Das ist alles gut.

 figure { aspect-ratio: 1 / 1.5; }

Wir müssen lediglich alle Dimensionen des Inhalts ändern, damit er auch richtig reagiert. Der erste Schritt besteht darin, einen Container zur Überwachung unserer Abmessungen bereitzustellen. Dies wird unser Figurenelement sein.

Um hier Containerabfragen verwenden zu können, müssen wir einen sogenannten Einschlusskontext definieren. Wir können dies mit der Eigenschaft container-type tun. Für dieses Beispiel können wir einen Wert für die Inline-Größe verwenden.

 figure { ... container-type: inline-size; }

Dadurch wird ein Container eingerichtet, dessen Größe die Dinge anhand seiner Inline-Größe anpasst, die in diesem Fall der Breite der Figur entspricht. Okay, jetzt müssen wir einen Container überwachen und können nun Container-Abfrageeinheiten verwenden. Und es gibt eine große Auswahl. Wir können jeden dieser Einheitswerte verwenden:

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Hier verwenden wir cqi , was meiner Meinung nach für „Container Query Inline“ steht. Eine cqi Einheit entspricht einem Prozent der Breite des Containers. Ok, das ist alles was wir brauchen; Von hier aus stellen wir die Einheiten nur noch nach Bedarf ein.

Hier haben wir einige benutzerdefinierte Eigenschaften, die für mehrere Elemente dieser Anzeige verwendet werden.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

Beginnen wir mit dem Abstand dieses Rahmens vom äußeren Rand des Behälters. Machen wir drei cqi .

 figure { ... --frameInset: 3cqi; }

Als nächstes legen wir hier die Dicke der Ränder fest. In diesem Fall verwende ich die max Funktion, um zu verhindern, dass die Ränder ständig unter einen Pixel schrumpfen. Ich möchte jedoch, dass sie dynamisch sind, solange sie größer als dieser Ein-Pixel-Wert sind.

Der erste Wert ist also ein Pixel, der zweite ist der dynamische Wert. Machen wir es zu einem cqi .

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

Nun machen wir für das strong Element, den Haupttitel, den „Vans“-Text, fünfundzwanzig cqi daraus. Und für den Platz unter dem Titel machen wir ihn zu drei cqi .

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

Kommen wir nun zum Untertitel „Off the Wall“. Es sollte etwa halb so groß sein wie der Haupttitel, also versuchen wir es mit zwölf cqi . Und für den Platz über dem Text verwenden wir wieder drei cqi .

 em { font-size: 12cqi; padding-top: 3cqi; }

Okay, für das letzte Stück, die Beschriftung „Seit 1966“, verwenden wir eine Schriftgröße von sechs cqi . Und für den Raum darüber und darunter verwenden wir die logische Eigenschaft für padding-block , die bis zu zwei Werte annehmen kann. Der erste Wert ist der Wert über dem Text und der zweite Wert gilt für den Raum darunter.

Lassen Sie uns also mit den beiden oben genannten cqi fortfahren. Und in unserer Berechnung lassen wir das --frameInset unverändert, gehen aber von fünf cqi zusätzlichem Speicherplatz aus.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

Ok cool, das sieht gut aus.

Werfen wir einen Blick darauf, wie es reagiert. Während wir darauf drücken, reagiert alles gleichmäßig und genau so, wie wir es wollten. Es sieht einem Bild sehr ähnlich.

Auch wenn es klein ist, sieht es ziemlich gut aus und man sieht, dass die Ränder nie unter einen Pixel schrumpfen. Wenn wir dann zu sehr schmalen Breiten kommen, wird es breiter und alles sieht immer noch großartig aus.

Wie cool ist das? Eine Reihe von Stilen, und es funktioniert durch und durch. Wenn wir es hin und her skalieren, sieht es großartig aus.

Was jetzt noch cooler ist, ist, dass wir unser Anzeigen-Markup übernehmen und es in den Hauptspaltenbereich hierher verschieben können und alles weiterhin so funktioniert, als ob es ein Bild wäre.

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

Das ist einfach so schön und so cool. Denken Sie daran, dass es nur eine Reihe von Stilen gibt, um all dies zu erreichen. Und es waren keine Medienanfragen beteiligt. Containerabfragen als Ganzes umfassen noch viel mehr. Halten Sie also Ausschau nach zukünftigen Beiträgen, in denen ich verschiedene Aspekte behandle.

Möchten Sie es in Aktion sehen?

Schauen Sie sich den Democode und Beispiele dieser Techniken im folgenden Codepen-Beispiel an. Wenn Sie Fragen oder Gedanken haben, zögern Sie nicht, einen Kommentar zu hinterlassen.