Omjer slike - CSS-trikovi

Svojstvo CSS aspect-ratioomogućuje vam stvaranje okvira koji održavaju proporcionalne dimenzije gdje se heighti widthokvira automatski izračunavaju kao omjer. Malo je matematike, ali ideja je da na ovom svojstvu možete podijeliti jednu vrijednost s drugom, a izračunata vrijednost osigurava da okvir ostane u tom omjeru.

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

aspect-ratiodefiniran je u CSS modulu za dimenzioniranje okvira razine 4, koji je trenutno u radnom nacrtu. To znači da je još uvijek u tijeku i ima šanse za promjenu. No s Chromeom i Firefoxom koji ga podržavaju iza eksperimentalne zastave, a Safari Technology Preview koji mu je dodao podršku početkom 2021. godine, postoje snažni signali koji aspect-ratiodobivaju puno maha.

Sintaksa

aspect-ratio: auto || ;

Jednostavnim engleskim: aspect-ratiopretpostavlja se da je autoprema zadanim postavkama ili prihvaća a kao vrijednost where .

• Početna vrijednost: auto
• Odnosi se na: sve elemente, osim u unutarnje okvire i unutarnje rubinske ili stolne kutije
• Naslijeđeno: ne
• Postoci: n / a
• Izračunata vrijednost: navedena ključna riječ ili par brojeva
• Vrsta animacije: diskretna

Vrijednosti

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

Radi na zamijenjenom i nezamijenjenom sadržaju

Ako razmišljate: "Uhm, da, zar to preglednik već ne čini za nas na slikama?" odgovor je: apsolutno . Preglednici rade neke fensi izračune omjera slike na zamijenjenom sadržaju poput slika. Dakle, ako slika ima, recimo, širinu od 500 piksela, preglednik prilagođava svoje algoritme CSS rasporeda kako bi održao unutarnje ili "prirodne" dimenzije slike. aspect-ratioSvojstvo se može koristiti kako bi učinkovito zaobilaze prirodne dimenzije.

No , nezamijenjeni sadržaj nema prirodni omjer. To je većina stvari s kojima radimo, poput div-ova. Umjesto da pokuša zadržati prirodne proporcije elementa, aspect-ratiopostavlja "preferirano" dimenzioniranje.

Sada specifikacija trenutno primjećuje da starije CSS specifikacije, posebno CSS 2.1, ne sadrže jasnu razliku između zamijenjenog i nezamijenjenog sadržaja. To znači da bismo mogli vidjeti neke dodatne posebne slučajeve dodane u specifikaciju kako bi ih pojasnili. Za sada vidimo da preglednici izbacuju podršku za zasebno postavljanje željenih omjera slike na zamijenjene i nezamijenjene, pri čemu neki preglednici s ranom podrškom iza eksperimentalne zastave mogu podržavati samo aspect-rationezamijenjeni sadržaj. Svakako vrijedi pripaziti na podršku preglednika kako se ona razvija.

Djeluje samostalno bez navođenja znaka widthiliheight

Pa, da, možemo ga jednostavno ispustiti na element poput ovog:

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

... i zadani element elementa width: autopodrazumijeva postavljanje dimenzija elementa.

Mijenja se kada je widthili heightje na istom elementu

Recimo da imamo element širine 300pxi an aspect-ratiood 3/1.

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

Po prirodi aspect-ratioželi sam izračunati dimenzije elementa i to će učiniti na temelju konteksta u kojem se koristi. Ali s tim widthubačenim, govori omjer 300pxširine i visine za izračun okvira omjera elementa koristeći širinu. Kao rezultat, to je kao da smo upravo napisali:

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

Ovo ima smisla! Zapamtite, kada nije navedeno widthili heightnije, preglednik pretpostavlja da jesu autoi odatle ide. Kad pružamo eksplicitne vrijednosti widthi heightvrijednosti, to su one koje se koriste.

U nekim se situacijama zanemaruje

Tu stvari postaju malo pametnije, jer postoje slučajevi u kojima aspect-ratiose previdi ili na izračune utječu druga svojstva. To uključuje:

Kada su oba widthi heightdeklarirani na elementu

Upravo smo vidjeli kako će izjava ili widthili heighti element utjecati na izračun aspect-ratio. Ali ako element već ima i widtha height, oni se koriste umjesto aspect-ratio. Potrebno je poništiti oba svojstva aspect-ratio; ako postavite bilo samostalno heightili widthsamostalno, neće se slomiti omjer slike.

Stvara sene, zar ne? Ako koristite bilo koju widthili heightprisiljavate aspect-ratioda koristi tu vrijednost u izračunu, onda logično slijedi da bi upotreba obje potpuno nadjačala, aspect-ratiojer su obje vrijednosti već osigurane i postavljene.

Kad se sadržaj izbije iz omjera

Jednostavno rečeno, ako imate element s omjerom stranica, a sadržaj je toliko dugačak da prisiljava element da se proširi, tada će se element proširiti. A ako se element proširi, njegove se dimenzije mijenjaju i, tako, nema više omjera. Zbog toga specifikacija kaže da svojstvo postavlja "preferirani" omjer slike. Poželjno je, ali nije propisano.

Ne sviđa vam se kako to funkcionira? Postavljanje min-height: 0;elementa omogućit će sadržaju da pređe željeni omjer slike umjesto da ga proširi.

Kad "izgubi" na min-*i max-*svojstva

Upravo smo vidjeli kako to funkcionira, zar ne? Kad sadržaj premaši dimenzije okvira, aspect-ratioefektivno više nema jer se okvir proširuje sadržajem. To možemo nadvladati s min-width: 0.

To je zato što se sva min-*i max-*svojstva obično bore widthi heightza prevlast u ratu nad izračunima Box modela. Na primjer:

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

Ali:

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

To je zato min-widthšto sprječava widthpad ispod određene vrijednosti ili se zanemaruje jer widthje element već postavio element iznad minimalne širine koja treba biti. Ista stvar vrijedi i za min-height, max-widthi max-height.

Poanta svega: ako postavimo obje min-*ili max-*svojstvo na isti element kao aspect-ratioi oni "pobijede" widthili heightće ih nadvladati aspect-ratio. Rekao sam ti da je to malo pametno. ?

Podrška preglednika

IE	Rub	Firefox	Krom	Safari	Opera
Ne	Ne	86 1.2,3	90 4	TP 5	Ne

Android Chrome	Android Firefox	Android preglednik	iOS Safari	Opera Mobile
Ne	Ne	Ne	Ne	Ne

Više informacija

Članak 1. srpnja 2020

Prvi pogled na "omjer slike"

Sara Cope