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!   https://youtu.be/5ugwp7HlpGs?embedable=true  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   Eigenschaft container-type  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   verwenden, das es dem Container ermöglicht, wie ein Bild zu reagieren. Das ist alles gut. aspect-ratio   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   tun. Für dieses Beispiel können wir einen Wert für die Inline-Größe verwenden. container-type   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   , was meiner Meinung nach für „Container Query Inline“ steht. Eine   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. cqi cqi  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   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. max  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   Element, den Haupttitel, den „Vans“-Text, fünfundzwanzig   daraus. Und für den Platz unter dem Titel machen wir ihn zu drei   . strong cqi 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   . Und für den Platz über dem Text verwenden wir wieder drei   . cqi 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   . Und für den Raum darüber und darunter verwenden wir die logische Eigenschaft für   , 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. cqi padding-block  Lassen Sie uns also mit den beiden oben genannten   fortfahren. Und in unserer Berechnung lassen wir das   unverändert, gehen aber von fünf   zusätzlichem Speicherplatz aus. cqi --frameInset cqi   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.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Dieses Audio ist in der Originalsprache der Geschichte produziert!

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps