Kuvasuhde - CSS-temppuja

CSS-ominaisuuden aspect-ratioavulla voit luoda laatikoita, jotka ylläpitävät suhteellisia mittasuhteita, joissa ruutu heightja widthja lasketaan automaattisesti suhteena. Se on pieni matematiikka-y, mutta idea on, että voit jakaa yhden arvon toisella tällä ominaisuudella ja laskettu arvo varmistaa, että ruutu pysyy tässä suhteessa.

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

aspect-ratioon määritelty CSS-laatikon koon moduulin tason 4 määrittelyssä, joka on parhaillaan työluonnoksessa. Se tarkoittaa, että se on edelleen kesken ja sillä on mahdollisuus muuttua. Mutta kun Chrome ja Firefox tukevat sitä kokeellisen lipun takana ja Safari Technology Preview lisää siihen tuen vuoden 2021 alussa, on vahvoja signaaleja, jotka aspect-ratioovat saamassa paljon vauhtia.

Syntaksi

aspect-ratio: auto || ;

Yksinkertaisesti englanniksi: aspect-ratiojoko oletetaan olevan autooletuksena tai se hyväksyy arvon arvoksi missä .

• Alkuarvo: auto
• Koskee kaikkia elementtejä, paitsi riviruutuja ja sisäisiä rubiini- tai pöytälaatikoita
• Peritty: ei
• Prosenttiosuudet: n / a
• Laskettu arvo: määritetty avainsana tai numeropari
• Animaation tyyppi: erillinen

Arvot

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

Se toimii korvatulla ja korvaamattomalla sisällöllä

Jos ajattelet: "Uhm, joo, eikö selain jo tee tätä meille kuvissa?" vastaus on: ehdottomasti . Selaimet tekevät hienoja kuvasuhteen laskelmia korvaavalle sisällölle, kuten kuville. Joten jos kuvan leveys on esimerkiksi 500 kuvapistettä, selain joustaa CSS-asettelualgoritmejaan säilyttääkseen kuvan sisäiset tai "luonnolliset" mitat. aspect-ratioOmaisuus voidaan käyttää tehokkaasti ohittaa nämä luonnolliset ulottuvuudet.

Mutta korvaamattomalla sisällöllä ei ole luonnollista osuutta. Se on suurin osa asioista, joiden kanssa työskentelemme, kuten divs. Sen sijaan, että yritettäisi säilyttää elementin luonnolliset mittasuhteet, aspect-ratioasettaa "ensisijaisen" koon.

Nyt tekninen huomautus huomauttaa, että vanhemmat CSS-spesifikaatiot, erityisesti CSS 2.1, eivät sisällä selkeää eroa korvatun ja korvaamattoman sisällön välillä. Tämä tarkoittaa, että voimme nähdä joitain erityistapauksia, jotka on lisätty tekniseen tietoon niiden selventämiseksi. Toistaiseksi näemme, että selaimet tukevat ensisijaisten kuvasuhteiden asettamista vaihdetuille ja korvaamattomille erikseen, jolloin jotkut selaimet, joilla on varhainen tuki kokeellisen lipun takana, saattavat tukea vain aspect-ratiokorvaamatonta sisältöä. Ehdottomasti kannattaa pitää silmällä selaintukea sen kehittyessä.

Se toimii yksinään määrittelemättä widthtaiheight

Joten, joo, voimme yksinkertaisesti pudottaa sen tällaiselle elementille:

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

… Ja elementin oletusarvo width: autoalkaa implisiittisesti asettaa elementin mitat.

Se muuttuu, kun widthtai heightovat saman alkuaineen

Sanotaan meillä on elementti, jonka leveys on 300pxja aspect-ratioon 3/1.

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

Luonteeltaan aspect-ratiohaluaa laskea elementin mitat yksin ja tekee sen kontekstin perusteella, jossa sitä käytetään. Mutta kun se widthheitetään sisään, se kertoo kuvasuhteen laskea elementin kuvasuhdelaatikko 300pxleveydellä. Seurauksena on, että olemme juuri kirjoittaneet:

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

Tässä on järkeä! Muista, että kun ei määritetä widthtai heightmääritetään, selain olettaa, että ne ovat autoja siirtyvät sieltä. Kun tarjoamme täsmällisiä widthja heightarvoja, ne ovat tottuneita.

Se jätetään huomiotta joissakin tilanteissa

Täällä asiat muuttuvat hieman mielenkiintoisiksi, koska joissakin tapauksissa aspect-ratiose jätetään huomiotta tai muut ominaisuudet vaikuttavat sen laskelmiin. Se sisältää:

Kun molemmat widthja heighton ilmoitettu elementille

Näimme juuri, kuinka jommankumman widthtai heightpäälle ja elementin ilmoittaminen vaikuttaa laskentaan aspect-ratio. Mutta jos elementillä on jo sekä a widthettä height, ne tottuvat sen sijaan aspect-ratio. Se vaatii molemmat ominaisuudet ohittamaan aspect-ratio; jompikumpi heighttai widthyksinään ei riko elementin kuvasuhdetta.

Tekee seneistä, eikö? Jos jompaa kumpaa widthtai heightpakotetaan aspect-ratiokäyttämään kyseistä arvoa laskennassa, seuraa loogisesti, että molempien käyttö ohittaa aspect-ratiokokonaan, koska molemmat arvot on jo annettu ja asetettu.

Kun sisältö hajoaa suhteesta

Yksinkertaisesti sanottuna, jos sinulla on elementti, jolla on kuvasuhde ja sisältö on niin pitkä, että se pakottaa elementin laajentumaan, elementti laajenee. Ja jos elementti laajenee, sen mitat muuttuvat eikä siten enää kuvasuhdetta. Siksi teknisen tiedon mukaan ominaisuus asettaa "ensisijaisen" kuvasuhteen. Se on suositeltavaa, mutta sitä ei ole määrätty.

Etkö pidä siitä, miten se toimii? min-height: 0;Elementin asettaminen antaa sisällön ylittää suositellun kuvasuhteen laajentamisen sijaan.

Kun se "menettää" min-*ja max-*ominaisuuksia

Näimme vain tavallaan, miten se toimii, eikö? Kun sisältö ylittää laatikon mitat, se aspect-ratioon käytännössä kadonnut, koska laatikko laajenee sisällön mukana. Voimme ohittaa sen min-width: 0.

Tämä johtuu siitä, että kaikki ominaisuudet min-*ja max-*ominaisuudet yleensä taistelevat widthja heightylivaltaa vastaan ​​Box Model -laskelmia koskevassa sodassa. Esimerkiksi:

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

Mutta:

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

Tämä johtuu siitä, että min-widthjoko estetään widthmenemästä tietyn arvon alapuolelle, tai se ohitetaan, koska widthelementti on jo asettanut elementin sen vähimmäisleveyden yli, jonka sen on oltava. Sama pätee min-height, max-widthja max-height.

Piste Kaiken tämän: jos asetamme sekä min-*tai max-*omaisuuden samalla elementti aspect-ratioja ne ”voittaa” yli widthtai heightsitten ne ohittavat aspect-ratio. Sanoin teille, että se oli hieman mielenterveys. ?

Selaimen tuki

IE	Reuna	Firefox	Kromi	Safari	Ooppera
Ei	Ei	86 1.2,3	90 4	TP 5	Ei

Android Chrome	Android Firefox	Android-selain	iOS Safari	Opera Mobile
Ei	Ei	Ei	Ei	Ei

Lisää tietoa

Artikkeli 1. heinäkuuta 2020

Ensimmäinen katsaus "kuvasuhteeseen"

Sara Cope