Aspectverhouding - CSS-trucs

Met de CSS-eigenschap aspect-ratiokunt u kaders maken die proportionele afmetingen behouden, waarbij de heighten widthvan een kader automatisch als een verhouding worden berekend. Het is een beetje wiskundig, maar het idee is dat je de ene waarde door de andere kunt delen op deze eigenschap en de berekende waarde zorgt ervoor dat een box in die verhouding blijft.

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

aspect-ratiowordt gedefinieerd in de CSS Box Sizing Module Level 4-specificatie, die momenteel in Working Draft staat. Dat betekent dat het nog steeds bezig is en een kans heeft om te veranderen. Maar nu Chrome en Firefox het ondersteunen achter een experimentele vlag, en Safari Technology Preview die er begin 2021 ondersteuning voor toevoegt, zijn er sterke signalen die aspect-ratioveel aan kracht winnen.

Syntaxis

aspect-ratio: auto || ;

In gewoon Engels: aspect-ratiowordt verondersteld autostandaard te zijn, of accepteert a als een waarde waar .

• Beginwaarde: auto
• Geldt voor: alle elementen behalve inline boxes en interne ruby ​​of table boxes
• Overgenomen: nee
• Percentages: nvt
• Berekende waarde: gespecificeerd trefwoord of een paar cijfers
• Animatietype: discreet

Waarden

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

Het werkt op vervangen en niet-vervangen inhoud

Als je denkt: "Eh, ja, doet de browser dit niet al voor ons op afbeeldingen?" het antwoord is: absoluut . Browsers voeren een aantal fraaie beeldverhoudingberekeningen uit op vervangen inhoud, zoals afbeeldingen. Dus als een afbeelding bijvoorbeeld een breedte van 500px heeft, buigt de browser zijn CSS-lay-outalgoritmen om de intrinsieke of "natuurlijke" afmetingen van de afbeelding te behouden. De aspect-ratioeigenschap kan worden gebruikt om die natuurlijke dimensies effectief te negeren.

Maar niet-vervangen inhoud heeft geen natuurlijke proportie. Dat zijn de meeste dingen waarmee we werken, zoals divs. In plaats van te proberen de natuurlijke verhoudingen van het element te behouden, aspect-ratiostelt u een “geprefereerde” maatvoering in.

Nu merkt de specificatie momenteel op dat oudere CSS-specificaties, met name CSS 2.1, geen duidelijk onderscheid bevatten tussen vervangen en niet-vervangen inhoud. Dat betekent dat we enkele extra speciale gevallen kunnen zien die aan de specificatie zijn toegevoegd om ze te helpen verduidelijken. Voorlopig zien we dat browsers ondersteuning uitrollen voor het instellen van voorkeursbeeldverhoudingen op afzonderlijk vervangen en niet-vervangen, terwijl sommige browsers met vroege ondersteuning achter een experimentele vlag mogelijk alleen aspect-rationiet-vervangen inhoud ondersteunen. Zeker de moeite waard om de browserondersteuning in de gaten te houden terwijl deze evolueert.

Het werkt op zichzelf zonder een widthof op te gevenheight

Dus ja, we kunnen het gewoon op een element als dit laten vallen:

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

… En de standaardinstelling van het element wordt width: autoimpliciet geactiveerd om de afmetingen van het element in te stellen.

Het verandert wanneer widthof heightop hetzelfde element

Stel dat we een element hebben met een breedte van 300pxen een aspect-ratiovan 3/1.

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

aspect-ratioWil van nature de afmetingen van het element zelf berekenen en zal dit doen op basis van de context waarin het wordt gebruikt. Maar met dat widtherin gegooid, vertelt het de aspectverhouding om het vak met de aspectverhouding van het element 300pxals de breedte te gebruiken. Als gevolg hiervan is het alsof we zojuist zijn geschreven:

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

Dit slaat ergens op! Onthoud dat als er geen widthof heightis opgegeven, de browser ervan uitgaat dat dit het geval is autoen van daaruit verder gaat. Wanneer we expliciete widthen heightwaarden geven, zijn die wat wennen.

Het wordt in sommige situaties genegeerd

Dit is waar dingen een beetje verbaasd worden, omdat er gevallen zijn waarin het aspect-ratioover het hoofd wordt gezien of de berekeningen worden beïnvloed door andere eigenschappen. Dat omvat:

Wanneer beide widthen heightworden gedeclareerd op het element

We hebben zojuist gezien hoe het declareren van een van widthof heightop en element de berekening van aspect-ratio. Maar als het element al een widthen heeft height, worden die gebruikt in plaats van aspect-ratio. Beide eigenschappen moeten worden overschreven aspect-ratio; het instellen van één van beide heightof widthalleen zal de aspectverhouding van het element niet verbreken.

Maakt senes, toch? Als u een van de twee gebruikt widthof de heightdwingt aspect-ratioom die waarde in de berekening te gebruiken, dan volgt logischerwijs dat het gebruik van beide volledig zou worden overschreven aspect-ratio, aangezien beide waarden al zijn opgegeven en ingesteld.

Wanneer inhoud uit de verhouding breekt

Simpel gezegd, als je een element hebt met een aspectverhouding en de inhoud is zo lang dat het het element dwingt uit te breiden, dan zal het element uitzetten. En als het element uitzet, veranderen de afmetingen en dus geen aspectverhouding meer. Dit is de reden waarom de specificatie zegt dat de eigenschap de "geprefereerde" aspectverhouding instelt. Het heeft de voorkeur, maar niet voorgeschreven.

Vind je het niet leuk hoe dat werkt? Als u min-height: 0;het element instelt, kan de inhoud de gewenste beeldverhouding overstromen in plaats van deze uit te breiden.

Wanneer het "verliest" aan min-*en max-*eigenschappen

We hebben gewoon gezien hoe dat werkt, toch? Wanneer de inhoud de afmetingen van de doos overschrijdt, aspect-ratiois deze effectief weg omdat de doos groter wordt met de inhoud. We kunnen dat opheffen met min-width: 0.

Dat komt omdat alle min-*en max-*eigendommen typisch strijden widthen heightom suprematie in de oorlog over Box Model-berekeningen. Bijvoorbeeld:

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

Maar:

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

Dat komt omdat het min-widthofwel verhindert widthom onder een specifieke waarde te komen, of het wordt genegeerd omdat widthhet element al is ingesteld buiten de minimale breedte die het moet zijn. Hetzelfde geldt voor min-height, max-widthen max-height.

Het punt van dit alles: als we zowel a min-*of max-*eigenschap op hetzelfde element zetten als aspect-ratioen ze “winnen” widthof height, dan zullen die voorrang krijgen aspect-ratio. Ik zei je dat het een beetje geestverruimend was. ​

Browser-ondersteuning

D.W.Z	Rand	Firefox	Chrome	Safari	Opera
Nee	Nee	86 1.2,3	90 4	TP 5	Nee

Android Chrome	Android Firefox	Android-browser	iOS Safari	Opera Mobile
Nee	Nee	Nee	Nee	Nee

Meer informatie

Artikel op 1 juli 2020

Een eerste blik op 'aspect-ratio'

Sara Cope