Størrelsesforhold - CSS-triks

CSS-egenskapen aspect-ratiolar deg opprette bokser som opprettholder proporsjonale dimensjoner der heightog widthav en boks beregnes automatisk som et forhold. Det er litt matte-y, men ideen er at du kan dele en verdi med en annen på denne egenskapen, og den beregnede verdien sikrer at en boks forblir i den andelen.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioer definert i CSS Box Sizing Module Level 4 spesifikasjon, som for øyeblikket er i Working Draft. Det betyr at den fortsatt pågår og har en sjanse til å endre seg. Men med Chrome og Firefox som støtter det bak et eksperimentelt flagg, og Safari Technology Preview legger til støtte for det tidlig i 2021, er det sterke signaler som aspect-ratiofår mye fart.

Syntaks

aspect-ratio: auto || ;

På vanlig engelsk: aspect-ratioantas enten å være autostandard, eller godtar a som en verdi hvor .

• Opprinnelig verdi: auto
• Gjelder: alle elementer unntatt innebygde bokser og innvendige rubin- eller bordbokser
• Arvet: nei
• Prosentandeler: ikke relevant
• Beregnet verdi: spesifisert nøkkelord eller et par tall
• Animasjonstype: diskret

Verdier

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Den fungerer på erstattet og ikke erstattet innhold

Hvis du tenker, "Uhm, ja, gjør ikke nettleseren dette allerede for oss på bilder?" svaret er: absolutt . Nettlesere gjør noen fancy aspektforholdsberegninger på erstattet innhold som bilder. Så hvis et bilde, for eksempel, har en bredde på 500 px, bøyer nettleseren sine CSS-layoutalgoritmer for å opprettholde bildets indre eller "naturlige" dimensjoner. Den aspect-ratioegenskapen kan brukes til å effektivt overstyre de naturlige dimensjoner.

Men ikke-erstattet innhold har ikke en naturlig andel. Det er det meste vi jobber med, som divs. Snarere enn å prøve å opprettholde elementets naturlige proporsjoner, aspect-ratioangir en "foretrukket" størrelse.

Nå bemerker spesifikasjonen for tiden at eldre CSS-spesifikasjoner, særlig CSS 2.1, ikke inneholder et klart skille mellom erstattet og ikke-erstattet innhold. Det betyr at vi kunne se noen ekstra spesielle tilfeller lagt til spesifikasjonen for å avklare dem. Foreløpig ser vi nettlesere som ruller ut støtte for å angi foretrukne sideforhold på erstattet og ikke-erstattet separat, hvor noen av nettleserne med tidlig støtte bak et eksperimentelt flagg kanskje bare støtter aspect-ratioikke-erstattet innhold. Absolutt verdt å holde øye med nettleserstøtten når den utvikler seg.

Det fungerer alene uten å spesifisere et widthellerheight

Så ja, vi kan bare slippe det på et element som dette:

.element ( aspect-ratio: 16 / 9; )

... og elementets standard width: autosparkes implisitt inn for å angi elementets dimensjoner.

Det endres når widtheller heighter på det samme elementet

La oss si at vi har et element med en bredde på 300pxog en aspect-ratiopå 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Av natur, aspect-ratioønsker å beregne elementets dimensjoner alene og vil gjøre det basert på konteksten der det brukes. Men med det som widthkastes inn, forteller det sideforhold for å beregne elementets størrelsesforholdsboks med 300pxbredden. Som et resultat er det som om vi nettopp er skrevet:

.element ( height: 100px; width: 300px; )

Dette gir mening! Husk at når ingen widtheller heighter spesifisert, antar nettleseren at de er autoog går derfra. Når vi gi eksplisitt widthog heightverdier, de er hva venne.

Det blir ignorert i noen situasjoner

Det er her ting blir litt mind-bendy fordi det er tilfeller der aspect-ratioblir oversett eller beregningene er påvirket av andre egenskaper. Det inkluderer:

Når begge widthog heighter erklært på elementet

Vi så nettopp hvordan deklarering av enten widtheller heightpå og element vil påvirke beregningen av aspect-ratio. Men hvis elementet allerede har både a widthog height, blir de brukt i stedet for aspect-ratio. Det krever at begge egenskapene overstyres aspect-ratio; innstilling av enten heighteller widthalene vil ikke bryte elementets sideforhold.

Gjør sener, ikke sant? Hvis du bruker en widtheller heighttvinger den aspect-ratiotil å bruke den verdien i beregningen, følger det logisk at bruk av begge vil overstyre aspect-ratiohelt siden begge verdiene allerede er gitt og satt.

Når innholdet bryter ut av forholdet

Enkelt sagt, hvis du har et element med et størrelsesforhold og innholdet er så langt at det tvinger elementet til å utvide seg, vil elementet utvides. Og hvis elementet utvides, endres dimensjonene og dermed ikke mer sideforhold. Dette er grunnen til at spesifikasjonen sier at eiendommen angir det "foretrukne" størrelsesforholdet. Det er foretrukket, men ikke foreskrevet.

Liker ikke hvordan det fungerer? Innstilling min-height: 0;av elementet gjør at innholdet kan strømme over det foretrukne størrelsesforholdet i stedet for å utvide det.

Når det "mister" til min-*og max-*egenskaper

Vi så akkurat hvordan det fungerer, ikke sant? Når innholdet overstiger dimensjonene til boksen, er den aspect-ratioeffektivt borte fordi boksen utvides med innholdet. Vi kan overstyre det med min-width: 0.

Det er fordi alle min-*og max-*egenskapene vanligvis kjemper widthog heightfor overlegenhet i krigen om Box Model-beregninger. For eksempel:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Men:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Det er fordi min-widthdet enten hindrer å widthgå under en bestemt verdi, eller at det ignoreres fordi det widthallerede har satt elementet utover minimumsbredden det trenger å være. Det samme gjelder for min-height, max-widthog max-height.

Poenget med alt dette: hvis vi setter både a min-*eller max-*eiendom på samme element som aspect-ratioog de "vinner" over widtheller height, så vil de overstyre aspect-ratio. Fortalte deg at det var litt mind-bendy. ?

Nettleserstøtte

DVS	Kant	Firefox	Chrome	Safari	Opera
Nei	Nei	86 1,2,3	90 4	TP 5	Nei

Android Chrome	Android Firefox	Android-nettleser	iOS Safari	Opera Mobile
Nei	Nei	Nei	Nei	Nei

Mer informasjon

Artikkel 1. juli 2020

En første titt på `sideforhold`

Sara Cope