Razmerje stranic - CSS-triki

Lastnost CSS aspect-ratiovam omogoča ustvarjanje polj, ki ohranjajo sorazmerne dimenzije, kjer se polje heightin in widthpolje samodejno izračuna kot razmerje. Malo je matematike, vendar je ideja, da lahko na tej lastnosti eno vrednost delite z drugo, izračunana vrednost pa zagotovi, da polje ostane v tem razmerju.

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

aspect-ratioje opredeljen v specifikaciji modula za določanje velikosti CSS Box Level 4, ki je trenutno v delovnem osnutku. To pomeni, da še vedno poteka in ima možnost spremembe. Toda Chrome in Firefox ga podpirata za eksperimentalno zastavico in Safari Technology Preview, ki ji v začetku leta 2021 dodaja podporo, kaže na močne signale, ki aspect-ratiodobivajo velik zagon.

Sintaksa

aspect-ratio: auto || ;

V preprosti angleščini: aspect-ratiodomneva se, da je autoprivzeto, ali sprejme vrednost kot vrednost where .

• Začetna vrednost: auto
• Velja za: vse elemente, razen vrstic in notranje rubin ali mize
• Podedovano: ne
• Odstotki: n / a
• Izračunana vrednost: določena ključna beseda ali par številk
• Vrsta animacije: diskretna

Vrednote

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

Deluje na nadomeščeni in nenadomeščeni vsebini

Če razmišljate: "Uhm, ja, ali brskalnik tega že ne naredi na slikah?" odgovor je: absolutno . Brskalniki opravijo nekaj modnih izračunov razmerja stranic za nadomeščeno vsebino, kot so slike. Če ima slika recimo širino 500 slikovnih pik, brskalnik prilagodi svoje algoritme postavitve CSS, da ohrani lastne ali "naravne" dimenzije slike. aspect-ratioPremoženje se lahko uporablja za učinkovito preglasijo tiste naravne razsežnosti.

Toda nenadomeščena vsebina nima naravnega deleža. To je večina stvari, s katerimi delamo, na primer divji. Namesto da bi poskušali ohraniti naravne proporcije elementa, aspect-rationastavite "prednostno" velikost.

Spec trenutno ugotavlja, da starejše specifikacije CSS, zlasti CSS 2.1, ne vsebujejo jasnega razlikovanja med nadomeščeno in nenadomeščeno vsebino. To pomeni, da smo lahko v specifikacijo dodali nekaj dodatnih posebnih primerov, ki jih bodo lažje razjasnili. Zaenkrat opažamo, da brskalniki uvajajo podporo za nastavitev prednostnih razmerij stranic za nadomeščene in nenadomeščene ločeno, pri čemer nekateri brskalniki z zgodnjo podporo za eksperimentalno zastavico morda podpirajo le aspect-rationeizmenjeno vsebino. Vsekakor je vredno spremljati podporo brskalnika, ko se razvija.

Deluje samostojno, ne da bi določil widthozheight

Torej, ja, lahko ga preprosto spustimo na tak element:

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

… In privzeto se element privzeto width: autozačne, da nastavi dimenzije elementa.

Spremeni se, kadar je widthali heightje na istem elementu

Recimo, da imamo element s širino 300pxin aspect-ratiood 3/1.

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

Po naravi aspect-ratioželi sam izračunati dimenzije elementa in bo to storil glede na kontekst, v katerem se uporablja. Toda s tem, ki se widthvrže, pove razmerje stranic, da izračuna polje razmerja stranic elementa, ki se uporablja 300pxkot širina. Posledično je tako, kot da smo pravkar napisali:

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

To je smiselno! Ne pozabite, da če brskalnik ni določen widthali heightni, brskalnik domneva, da je to, autoin gre od tam naprej. Ko podajamo eksplicitne widthin heightvrednosti, se te navadijo.

V nekaterih primerih je prezrt

Tu se stvari nekoliko zalomijo, ker so v nekaterih primerih aspect-ratiospregledani ali na izračune vplivajo druge lastnosti. To vključuje:

Ko sta na elementu deklarirana oba widthinheight

Pravkar smo videli, kako bo navedba elementa widthali heightelementa in elementa vplivala na izračun aspect-ratio. Če pa element že ima oba widthin height, se ta uporabijo namesto aspect-ratio. Zahteva preglasitev obeh lastnosti aspect-ratio; nastavitev enega heightali widthsamega ne bo prekinila razmerja stranic elementa.

Naredi sene, kajne? Če uporabite katero koli widthali heightprisilno aspect-ratiouporabite to vrednost pri izračunu, potem logično izhaja, da bi uporaba obeh popolnoma preglasila, aspect-ratiosaj sta obe vrednosti že podani in nastavljeni.

Ko se vsebina izbije iz razmerja

Preprosto povedano, če imate element z razmerjem stranic in je vsebina tako dolga, da prisili element k razširitvi, se bo element razširil. In če se element razširi, se njegove dimenzije spremenijo in tako ni več razmerja stranic. Zato v specifikaciji piše, da lastnost nastavi "prednostno" razmerje stranic. Zaželeno je, vendar ni predpisano.

Vam ni všeč, kako to deluje? Nastavitev min-height: 0;elementa bo omogočila, da vsebina prepiše želeno razmerje stranic, namesto da bi ga razširila.

Ko "izgubi" min-*in max-*lastnosti

Pravkar smo videli, kako to deluje, kajne? Ko vsebina presega dimenzije škatle, aspect-ratioje dejansko ni več, ker se škatla z vsebino razširi. To lahko preglasimo s min-width: 0.

To je zato, ker vse min-*in max-*lastnosti običajno bitko widthin heightza prevlado v vojni nad izračune Box Model. Na primer:

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

Ampak:

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

To je zato, ker min-widthpreprečuje, widthda bi šel pod določeno vrednost, ali pa se prezre, ker widthje element že nastavil element, ki presega najmanjšo širino, ki jo mora biti. Ista stvar velja za min-height, max-widthin max-height.

Bistvo vsega tega: če oboji min-*ali max-*lastnost nastavimo na isti element kot aspect-ratioin bosta »zmagali« nad widthali height, bodo ti preglasili aspect-ratio. Rekel sem ti, da je malo umirjeno. ?

Podpora brskalnika

IE	Rob	Firefox	Chrome	Safari	Opera
Ne	Ne	86 1,2,3	90 4	TP 5	Ne

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

Več informacij

Članek 1. julija 2020

Prvi pogled na "razmerje stranic"

Sara Cope