Aspect-ratio - CSS-Tricks

Proprietatea CSS aspect-ratiovă permite să creați casete care să mențină dimensiuni proporționale în care caseta heightși widtho casetă sunt calculate automat ca raport. Este un pic math-y, dar ideea este că puteți împărți o valoare la alta pe această proprietate, iar valoarea calculată asigură că o casetă rămâne în această proporție.

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

aspect-ratioeste definit în specificația nivelului 4 al modulului de dimensionare a casetei CSS, care se află în prezent în proiectul de lucru. Asta înseamnă că este încă în desfășurare și are șanse să se schimbe. Dar cu Chrome și Firefox care îl susțin în spatele unui steag experimental, iar Safari Technology Preview adaugă suport pentru acesta la începutul anului 2021, există semnale puternice care aspect-ratiocâștigă mult impuls.

Sintaxă

aspect-ratio: auto || ;

În engleză simplă: aspect-ratiofie se presupune că este autoimplicit, fie acceptă a ca valoare unde .

• Valoarea initiala: auto
• Se aplică: tuturor elementelor, cu excepția casetelor în linie și a rubinilor interni sau a cutiilor de masă
• Moștenit: nu
• Procente: n / a
• Valoare calculată: cuvânt cheie specificat sau o pereche de numere
• Tipul de animație: discret

Valori

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

Funcționează pe conținut înlocuit și neînlocuit

Dacă vă gândiți: „Uhm, da, browserul nu face asta deja pentru noi pe imagini?” răspunsul este: absolut . Browserele fac niște calcule fanteziste ale raportului de aspect pentru conținutul înlocuit, cum ar fi imaginile. Deci, dacă o imagine are, să zicem, o lățime de 500 px, browserul își flexează algoritmii de aspect CSS pentru a menține dimensiunile intrinseci sau „naturale” ale imaginii. aspect-ratioProprietatea poate fi folosită pentru a înlocui în mod eficient aceste dimensiuni naturale.

Dar conținutul care nu este înlocuit nu are o proporție naturală. Aceasta este cea mai mare parte a lucrurilor cu care lucrăm, cum ar fi divs-urile. În loc să încercați să mențineți proporțiile naturale ale elementului, aspect-ratiosetați o dimensiune „preferată”.

Acum, specificația notează în prezent că specificațiile CSS mai vechi, în special CSS 2.1, nu conțin o distincție clară între conținutul înlocuit și cel neînlocuit. Asta înseamnă că am putea vedea câteva cazuri speciale suplimentare adăugate la specificații pentru a le clarifica. Deocamdată, vedem browserele care implementează suport pentru setarea raporturilor de aspect preferate în locul înlocuitului și al celor care nu sunt înlocuite separat, în cazul în care unele dintre browserele cu suport timpuriu în spatele unui semnal experimental ar putea accepta doar aspect-ratioconținutul care nu a fost înlocuit. Cu siguranță merită să fii cu ochii pe suportul browserului pe măsură ce evoluează.

Funcționează pe cont propriu fără a specifica un widthsauheight

Deci, da, îl putem lăsa pur și simplu pe un element ca acesta:

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

… Și implicit elementul width: autoîncepe implicit pentru a seta dimensiunile elementului.

Se schimbă atunci când sunt widthsau heightsunt pe același element

Să presupunem că avem un element cu o lățime de 300pxși un aspect-ratiode 3/1.

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

Prin natură, aspect-ratiodorește să calculeze singur dimensiunile elementului și o va face pe baza contextului în care este utilizat. Dar, cu acest lucru widtharuncat, îi spune raportului de aspect să calculeze caseta de raport de aspect a elementului folosind 300pxca lățime. Ca urmare, parcă tocmai am fi scris:

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

Are sens! Amintiți-vă, atunci când nu widthsau heightsunt specificate, browserul presupune că acestea sunt autoși pleacă de acolo. Când ne oferă în mod explicit widthși heightvalori, cei care sunt ceea ce se utilizează.

Este ignorat în unele situații

Aici lucrurile devin puțin încordate, deoarece există cazuri în care aspect-ratioeste trecut cu vederea sau calculele sunt afectate de alte proprietăți. Care include:

Când ambele widthși heightsunt declarate pe element

Tocmai am văzut cum declararea oricăruia widthsau a heightunui element și a unui element va afecta calculul aspect-ratio. Dar dacă elementul are deja atât a cât widthși height, aceștia se obișnuiesc în loc de aspect-ratio. Necesită ambele proprietăți pentru a suprascrie aspect-ratio; setarea fie heightsau widthsingură nu va sparge raportul de aspect al elementului.

Face seni, nu? Dacă folosind oricare widthsau heightforțează aspect-ratiosă utilizeze acea valoare în calcul, atunci rezultă logic că utilizarea ambelor ar suprascrie aspect-ratiocomplet, deoarece ambele valori sunt deja furnizate și setate.

Când conținutul iese din raport

Pur și simplu, dacă aveți un element cu un raport de aspect și conținutul este atât de lung încât îl obligă să se extindă, atunci elementul se va extinde. Și dacă elementul se extinde, dimensiunile sale se schimbă și, prin urmare, nu mai există un raport de aspect. Acesta este motivul pentru care specificația spune că proprietatea stabilește raportul de aspect „preferat”. Este preferat, dar nu este prescris.

Nu-ți place cum funcționează? Setarea min-height: 0;pe element va permite conținutului să depășească raportul de aspect preferat în loc să-l extindă.

Când „pierde” în fața min-*și max-*proprietățile

Am văzut cum funcționează asta, nu? Când conținutul depășește dimensiunile casetei, aceasta aspect-ratioeste efectiv dispărută, deoarece caseta se extinde odată cu conținutul. Putem înlocui asta cu min-width: 0.

Asta pentru că toate proprietățile min-*și max-*proprietățile se luptă în mod obișnuit widthși heightpentru supremație în războiul asupra calculelor modelului cutiei. De exemplu:

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

Dar:

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

Asta pentru că min-widthfie împiedică widthtrecerea sub o anumită valoare, fie este ignorat deoarece widthsetul a setat deja elementul dincolo de lățimea minimă pe care trebuie să o aibă. Același lucru este valabil și pentru min-height, max-widthși max-height.

Ideea tuturor: dacă setăm atât a min-*sau max-*proprietate pe același element ca aspect-ratioși ei „câștigă” peste widthsau height, atunci acestea vor suprascrie aspect-ratio. Ți-am spus că a fost puțin încordat. ?

Suport pentru browser

IE	Margine	Firefox	Crom	Safari	Operă
Nu	Nu	86 1,2,3	90 4	TP 5	Nu

Android Chrome	Android Firefox	Browser Android	Safari iOS	Opera Mobile
Nu	Nu	Nu	Nu	Nu

Mai multe informatii

Articol la 1 iulie 2020

O primă privire la „aspect-ratio”

Sara Cope