Bildförhållande - CSS-tricks

Med CSS-egenskapen aspect-ratiokan du skapa rutor som bibehåller proportionella dimensioner där heightoch widthför en ruta beräknas automatiskt som ett förhållande. Det är lite matte-y, men tanken är att du kan dela ett värde med ett annat på den här egenskapen och det beräknade värdet säkerställer att en ruta stannar i den proportionen.

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

aspect-ratiodefinieras i CSS Box Sizing Module Level 4 specifikation, som för närvarande finns i Working Draft. Det betyder att den fortfarande pågår och har en chans att förändras. Men med Chrome och Firefox som stöder det bakom en experimentell flagga, och Safari Technology Preview lägger till stöd för det i början av 2021, finns det starka signaler som aspect-ratiofår mycket fart.

Syntax

aspect-ratio: auto || ;

På vanlig engelska aspect-ratioantas antingen vara autostandard eller accepterar a som ett värde där .

• Ursprungligt värde: auto
• Gäller för: alla element utom inbyggda lådor och inre rubin- eller bordslådor
• Ärvt: nej
• Procentandelar: ej tillämpligt
• Beräknat värde: specificerat nyckelord eller ett par siffror
• Animationstyp: diskret

Värden

/* 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;

Det fungerar på ersatt och icke-ersatt innehåll

Om du tänker, "Uhm, ja, gör inte webbläsaren det redan för oss på bilder?" svaret är: absolut . Webbläsare gör några snygga beräkningar av bildförhållande på ersatt innehåll som bilder. Så om en bild har, till exempel, en bredd på 500 pixlar, böjer webbläsaren sina CSS-layoutalgoritmer för att bibehålla bildens inneboende eller ”naturliga” dimensioner. Den aspect-ratioegenskapen kan användas för att på ett effektivt sätt åsidosätta de naturliga dimensioner.

Men innehåll som inte ersätts har ingen naturlig andel. Det är det mesta av det vi jobbar med, som divs. I stället för att försöka bibehålla elementets naturliga proportioner, aspect-ratioanger du en ”föredragen” storlek.

Nu noterar specifikationen för närvarande att äldre CSS-specifikationer, särskilt CSS 2.1, inte innehåller en tydlig skillnad mellan ersatt och icke-ersatt innehåll. Det betyder att vi kunde se några ytterligare specialfall läggas till i specifikationen för att klargöra dem. För tillfället ser vi webbläsare rulla ut stöd för att ställa in önskade bildförhållanden på ersatta och icke-ersatta separat, där vissa av webbläsarna med tidigt stöd bakom en experimentell flagga kanske bara stöder aspect-ratioinnehåll som inte ersätts. Definitivt värt att hålla ett öga på webbläsarens stöd när det utvecklas.

Det fungerar på egen hand utan att ange ett widthellerheight

Så, ja, vi kan helt enkelt släppa det på ett sådant element:

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

... och elementets standard width: autosparkar in implicit för att ställa in elementets dimensioner.

Det ändras när widtheller heightär på samma element

Låt oss säga att vi har ett element med en bredd på 300pxoch en aspect-ratiopå 3/1.

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

Av naturen aspect-ratiovill beräkna elementets dimensioner på egen hand och kommer att göra det baserat på det sammanhang där det används. Men med det som widthkastas in berättar det bildförhållande för att beräkna elementets bildförhållande-ruta med 300pxsom bredden. Som ett resultat är det som om vi bara har skrivit:

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

Detta är vettigt! Kom ihåg att när ingen widtheller heightär specificerad antar webbläsaren att de är autooch går därifrån. När vi tillhandahåller uttryckliga widthoch heightvärden är det det som vänjer sig.

Det ignoreras i vissa situationer

Det är här sakerna blir lite tuffa eftersom det finns fall där man aspect-ratioförbises eller beräkningarna påverkas av andra egenskaper. Det inkluderar:

När båda widthoch heightdeklareras på elementet

Vi såg precis hur deklarering av antingen widtheller heightpå och element kommer att påverka beräkningen av aspect-ratio. Men om elementet redan har både a widthoch height, blir de vana istället för aspect-ratio. Det kräver att båda egenskaperna åsidosätts aspect-ratio; att ställa in antingen heighteller widthensam bryter inte elementets bildförhållande.

Gör sener, eller hur? Om du använder endera widtheller heighttvingar den aspect-ratioatt använda det värdet i beräkningen, följer det logiskt att användning av båda skulle helt åsidosätta aspect-ratioeftersom båda värdena redan tillhandahålls och ställts in.

När innehåll bryter ut ur förhållandet

Enkelt uttryckt, om du har ett element med ett bildförhållande och innehållet är så långt att det tvingar elementet att expandera, kommer elementet att expandera. Och om elementet expanderar ändras dess dimensioner och därmed inget mer bildförhållande. Det är därför specifikationen säger att egenskapen ställer in "föredraget" bildförhållande. Det är föredraget, men inte föreskrivet.

Gillar inte hur det fungerar? min-height: 0;Om du ställer in på elementet kan innehållet flyta över det önskade bildförhållandet istället för att expandera det.

När det "förlorar" till min-*och max-*egenskaper

Vi såg bara hur det fungerar, eller hur? När innehållet överstiger dimensionerna för rutan är den aspect-ratiofaktiskt borta eftersom rutan expanderar med innehållet. Vi kan åsidosätta det med min-width: 0.

Det beror på att alla egenskaper min-*och max-*egenskaper vanligtvis kämpar widthoch heightför överhöghet i kriget om Box Model-beräkningar. Till exempel:

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

Men:

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

Det beror på att min-widthantingen hindrar widthfrån att gå under ett visst värde, eller så ignoreras det eftersom den redan widthhar ställt in elementet utöver den minsta bredd det behöver vara. Samma sak gäller för min-height, max-widthoch max-height.

Poängen med allt detta: om vi ställer in både a min-*eller max-*egendom på samma element som aspect-ratiooch de "vinner" över widtheller height, så kommer de att åsidosätta aspect-ratio. Berättade att det var lite tufft. ?

Webbläsarstöd

IE	Kant	Firefox	Krom	Safari	Opera
Nej	Nej	86 1,2,3	90 4	TP 5	Nej

Android Chrome	Android Firefox	Android-webbläsare	iOS Safari	Opera Mobile
Nej	Nej	Nej	Nej	Nej

Mer information

Artikel den 1 juli 2020

En första titt på 'bildförhållande'

Sara Cope