Kuvasuhe - CSS-trikid

Atribuut CSS aspect-ratiovõimaldab teil luua kaste, mis säilitavad proportsionaalsed mõõtmed, kus kasti heightja widthkasti arvutatakse automaatselt suhtena. See on väike matemaatika-y, kuid idee on see, et saate sellel omadusel jagada ühe väärtuse teisega ja arvutatud väärtus tagab, et kast jääb sellesse proportsiooni.

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

aspect-ratioon määratletud CSS-i kasti suuruse mooduli 4. taseme spetsifikatsioonis, mis on praegu tööprojektis. See tähendab, et see on veel pooleli ja sellel on võimalus muutuda. Kuid kuna Chrome ja Firefox toetavad seda eksperimentaalse lipu taga ning Safari Technology Preview lisab sellele toe 2021. aasta alguses, on tugevaid signaale, mis aspect-ratiosaavad palju hoogu.

Süntaks

aspect-ratio: auto || ;

Selges inglise keeles: aspect-ratioeeldatakse, et see autoon vaikimisi, või aktsepteerib väärtusena a väärtust kus .

• Algne väärtus: auto
• Kehtib kõigi elementide kohta, välja arvatud tekstikastid ja sisemised rubiini- või lauakastid
• Päritud: ei
• Protsendid: n / a
• Arvutatud väärtus: määratud märksõna või paaripaar
• Animatsiooni tüüp: diskreetne

Väärtused

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

See töötab asendatud ja asendamata sisul

Kui mõtlete: "Uhm, jah, kas brauser ei tee seda juba meie jaoks piltidel?" vastus on: absoluutselt . Brauserid teevad väljamõeldud kuvasuhte arvutusi asendatud sisu, näiteks piltide jaoks. Nii et kui pildi laius on näiteks 500 pikslit, paindub brauser CSS-i paigutusalgoritme, et säilitada pildi sisemised või „loomulikud” mõõtmed. aspect-ratioVara saab tõhusalt alistavad looduslikud mõõtmed.

Kuid asendamata sisul pole loomulikku proportsiooni. See on enamik asju, millega me töötame, näiteks divs. Selle asemel, et püüda säilitada elemendi loomulikke proportsioone, aspect-ratiomäärab „eelistatud” suuruse.

Nüüd märgib spetsifikatsioon, et vanemad CSS-i spetsifikatsioonid, eriti CSS 2.1, ei sisalda selget vahet asendatud ja asendamata sisu vahel. See tähendab, et võiksime nende täpsustamiseks lisada spetsifikatsioonile veel mõned erijuhtumid. Praegu näeme, et brauserid toetavad eelistatud kuvasuhete seadmist asendatud ja asendamata eraldi, kus mõned varajase toega eksperimentaalse lipu taga olevad brauserid võivad toetada ainult aspect-ratioasendamata sisu. Kindlasti tasub brauseri toel silma peal hoida, kui see areneb.

See töötab iseenesest ilma, et täpsustaksite widthvõiheight

Nii, jah, me võime selle lihtsalt sellisele elemendile visata:

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

... ja elemendi vaikimisi width: autopaneb vaikimisi sisse elemendi mõõtmete määramine.

See muutub samal elemendil widthvõi heightsamal ajal

Oletame meil elemendi laius 300pxja aspect-ratioon 3/1.

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

Oma olemuselt aspect-ratiosoovib ta elemendi mõõtmed ise arvutada ja teeb seda lähtuvalt kontekstist, kus seda kasutatakse. Kui see sisse widthvisatakse, käsib see kuvasuhtega arvutada elemendi kuvasuhte kasti 300pxlaiusena. Selle tulemusena on justkui just kirjutatud:

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

See on mõistlik! Pidage meeles, et kui pole widthvõi heightpole määratud, eeldab brauser, et need on autoja lähevad sealt edasi. Kui pakume selgesõnalisi widthja heightväärtusi, siis harjuvad just need.

Mõnes olukorras seda ignoreeritakse

See on koht, kus asjad muutuvad veidi mõistlikuks, sest on juhtumeid, kus aspect-ratiosee jäetakse tähelepanuta või mõjutavad selle arvutusi muud omadused. See hõlmab järgmist:

Kui nii widthja heightdeklareeritakse element

Nägime just, kuidas kummagi widthvõi heightedasi ja elemendi deklareerimine mõjutab väärtuse arvutamist aspect-ratio. Kuid kui elemendil on juba nii a widthkui ka height, siis harjuvad need selle asemel aspect-ratio. Alistamiseks on vaja mõlemat omadust aspect-ratio; Kummagi heightvõi widthüksinda määramine ei riku elemendi kuvasuhet.

Teeb senese, eks? Kui kasutate kas widthvõi heightsunnib aspect-ratioseda väärtust kasutada arvutamisel, siis loogiliselt järeldub, et kasutades nii oleks täiesti alistada aspect-ratioüldse, sest mõlemad väärtused on juba antud ja seatud.

Kui sisu suhtest välja murdub

Lihtsamalt öeldes, kui teil on kuvasuhtega element ja sisu on nii pikk, et sunnib elementi laienema, siis element laieneb. Ja kui element laieneb, muutuvad selle mõõtmed ja seega enam kuvasuhet. Seetõttu ütleb spetsifikatsioon, et atribuut määrab „eelistatud” kuvasuhte. See on eelistatud, kuid pole ette nähtud.

Kas sulle ei meeldi, kuidas see töötab? min-height: 0;Elemendi seadistamine võimaldab sisul laiendamise asemel eelistatud kuvasuhet üle voolata.

Kui see "kaotab" min-*ja max-*omadused

Me lihtsalt nägime, kuidas see töötab, eks? Kui sisu ületab kasti mõõtmeid, aspect-ratioon see tegelikult kadunud, kuna kast laieneb koos sisuga. Saame selle tühistada min-width: 0.

Selle põhjuseks on see, et kõik omadused min-*ja max-*omadused võitlevad tavaliselt Box Model'i arvutuste sõjas widthja heightülemvõimu eest. Näiteks:

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

Aga:

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

Selle põhjuseks min-widthon see, et see takistab widthteatud väärtusest madalamale jõudmist või seda ignoreeritakse, sest widthelement on juba seadnud elemendi minimaalsest laiusest kaugemale, kui see peab olema. Sama asi kehtib ka min-height, max-widthja max-height.

Kõige selle mõte: kui seame mõlemad elemendi min-*või max-*omaduse samale elemendile aspect-ratioja nad „võidavad“ widthvõi height, siis need alistavad aspect-ratio. Ütlesin teile, et see oli natuke meeltmööda. ?

Brauseri tugi

IE	Edge	Firefox	Chrome	Safari	Ooper
Ei	Ei	86 1.2,3	90 4	TP 5	Ei

Android Chrome	Android Firefox	Androidi brauser	iOS-i Safari	Opera Mobile
Ei	Ei	Ei	Ei	Ei

Rohkem informatsiooni

Artikkel 1. juulist 2020

Esimene vaade kuvasuhtele

Sara Cope