Oldalarány - CSS-trükkök

A CSS tulajdonság aspect-ratiolehetővé teszi olyan mezők létrehozását, amelyek fenntartják az arányos méreteket, ahol a heightés widtha mezőt automatikusan számítják arányként. Ez egy kis matek-y, de az ötlet az, hogy ezen a tulajdonságon el lehet osztani az egyik értéket a másikkal, és a kiszámított érték biztosítja, hogy egy doboz ebben az arányban maradjon.

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

aspect-ratioa CSS Box méretezési modul 4. szintű specifikációja határozza meg, amely jelenleg munkadokumentumban van. Ez azt jelenti, hogy még folyamatban van, és esélye van a változásra. De mivel a Chrome és a Firefox kísérleti zászló mögött támogatja, és a Safari Technology Preview 2021 elején támogatást nyújt hozzá, vannak erős jelek, amelyek aspect-rationagy lendületet kapnak .

Szintaxis

aspect-ratio: auto || ;

Egyszerű angolul: aspect-ratiovagy autoalapértelmezés szerint feltételezzük , vagy a értéket fogad el értékként ahol .

• Kezdő érték: auto
• Alkalmazható: minden elem kivételével inline dobozok és belső rubin vagy asztalra dobozok
• Örökölt: nem
• Százalékok: n / a
• Számított érték: megadott kulcsszó vagy számpár
• Animáció típusa: diszkrét

Értékek

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

Cserélt és nem cserélt tartalmakon működik

Ha azt gondolja: "Uhm, igen, a böngésző már nem ezt csinálja helyettünk a képeken?" a válasz: abszolút . A böngészők néhány képzeletbeli képarány-számítást végeznek a kicserélt tartalmakon, például képeken. Tehát, ha egy kép mondjuk szélessége 500 képpont, akkor a böngésző a CSS elrendezési algoritmusait hajlítja a kép belső vagy „természetes” méreteinek fenntartása érdekében. Az aspect-ratioingatlan felhasználható a természetes dimenziók hatékony felülírására.

De a kicseréletlen tartalomnak nincs természetes aránya. Ez a legtöbb dolog, amellyel dolgozunk, például a div-ek. Ahelyett, hogy megpróbálná fenntartani az elem természetes arányait, aspect-ratio„preferált” méretet állít be.

A specifikáció jelenleg megjegyzi, hogy a régebbi CSS specifikációk, nevezetesen a CSS 2.1, nem tartalmaznak egyértelmű különbséget a kicserélt és a nem cserélt tartalmak között. Ez azt jelenti, hogy láthatunk néhány további speciális esetet a specifikációhoz, amelyek segítenek tisztázni őket. Egyelőre azt látjuk, hogy a böngészők támogatják az előnyben részesített képarányok külön-külön történő beállítását a kicserélt és a nem cserélt helyeken, ahol a böngészők egy része, amely korai támogatással rendelkezik egy kísérleti jelző mögött, csak aspect-ratioa nem kicserélt tartalmat támogathatja . Mindenképpen érdemes figyelemmel kísérni a böngésző támogatását, ahogy alakul.

Önállóan működik anélkül, hogy megadna egy widthvagyheight

Tehát, igen, egyszerűen leejthetjük egy ilyen elemre:

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

… És az elem alapértelmezett módon width: autobeindítja az elem dimenzióinak beállítását.

Ez megváltozik, amikor widthvagy heightugyanazon elem

Tegyük fel, hogy van egy elemünk, amelynek szélessége 300pxés an aspect-ratioértéke 3/1.

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

A természeténél fogva aspect-ratioönmagában szeretné kiszámítani az elem dimenzióit, és a használt környezet alapján fogja megtenni. De ha ezt widthbedobják, megmondja a képarányt, hogy kiszámítsa az elem oldalarány mezőjét 300pxszélességként. Ennek eredményeként olyan, mintha csak most írnánk:

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

Ennek van értelme! Ne feledje, hogy ha nincs megadva widthvagy heightnincs megadva, a böngésző feltételezi, hogy azok vannak, autoés onnan megy. Amikor kifejezetten widthés heightértékeket adunk meg, akkor ezeket szoktuk használni.

Bizonyos helyzetekben figyelmen kívül hagyják

Itt a dolgok kissé elgondolkodnak, mert vannak esetek, amikor aspect-ratiofigyelmen kívül hagyják, vagy a számításait más tulajdonságok befolyásolják. Az tartalmazza:

Amikor mindkettő widthés heightaz elemen deklarálva vannak

Éppen láttuk, hogy a widthvagy heighta és az elem deklarálása hogyan befolyásolja a aspect-ratio. De ha az elemnek már van egy widthés egy értéke height, akkor ezek helyett megszokják aspect-ratio. Mindkét tulajdonság felülírása szükséges aspect-ratio; Egyik heightvagy widthegyedüli beállítás nem fogja megszakítani az elem oldalarányát.

Szeneszeket csinál, igaz? Ha az egyik widthvagy heighta (z) aspect-ratiohasználatát arra kényszeríti , hogy ezt az értéket használja a számításban, akkor logikusan következik, hogy mindkettő használata teljesen felülírja aspect-ratio, mivel mindkét érték már meg van adva és be van állítva.

Amikor a tartalom kitör az arányból

Egyszerűen fogalmazva, ha van egy képarányú elem, és a tartalma olyan hosszú, hogy arra kényszeríti az elemet, hogy táguljon, akkor az elem kitágul. Ha pedig az elem kibővül, akkor változnak a méretei, és így nincs több képaránya. Ezért a specifikáció szerint a tulajdonság állítja be a „preferált” képarányt. Előnyben részesítették, de nem írták elő.

Nem tetszik, hogy működik? Az min-height: 0;elem beállítása lehetővé teszi, hogy a tartalom kibővítése helyett túlcsorduljon az előnyben részesített képarányon.

Amikor „elveszíti” min-*és max-*tulajdonságait

Valahogy láttuk, hogy működik ez, igaz? Ha a tartalom meghaladja a doboz méretét, akkor az aspect-ratioeltűnik, mert a doboz kibővül a tartalommal. Ezt felülírhatjuk min-width: 0.

Ez azért van, mert az összes tulajdonság min-*és max-*tulajdonság jellemzően a Box Model számítások elleni háborúban harcol widthés heighta felsőbbségért. Például:

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

De:

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

Ez azért min-widthvan, mert vagy megakadályozza width, hogy egy adott érték alá widthkerüljön , vagy figyelmen kívül hagyja, mert a set már beállította az elemet a szükséges minimális szélességnél. Ugyanez érvényes az min-height, max-widthés max-height.

A lényeg mindezt: ha beállította a min-*vagy max-*tulajdonság ugyanazon elem aspect-ratioés a „nyerő” felett widthvagy height, akkor azok felülírják aspect-ratio. Mondtam, hogy kissé elmés. ?

Böngésző támogatás

AZAZ	Él	Firefox	Króm	Szafari	Opera
Nem	Nem	86 1.2,3	90 4	TP 5	Nem

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mobile
Nem	Nem	Nem	Nem	Nem

Több információ

Cikk 2020. július 1-jén

Első pillantás a "képarányra"

Sara Cope