Malu attiecība - CSS-triki

CSS rekvizīts aspect-ratioļauj izveidot lodziņus, kas uztur proporcionālus izmērus, kur lodziņš heightun widthlodziņš tiek automātiski aprēķināti kā attiecība. Tas ir nedaudz math-y, bet ideja ir tāda, ka šajā īpašumā varat sadalīt vienu vērtību ar citu, un aprēķinātā vērtība nodrošina, ka lodziņš paliek šajā proporcijā.

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

aspect-ratioir definēts CSS lodziņa lieluma moduļa 4. līmeņa specifikācijā, kas pašlaik ir darba projektā. Tas nozīmē, ka tas joprojām notiek un tam ir iespējas mainīties. Bet, tā kā pārlūks Chrome un Firefox to atbalsta aiz eksperimentāla karoga un Safari Technology Preview pievieno atbalstu tam 2021. gada sākumā, ir spēcīgi signāli, kas aspect-ratioiegūst lielu impulsu.

Sintakse

aspect-ratio: auto || ;

Vienkāršā angļu valodā: aspect-ratiotiek pieņemts, ka tas ir autopēc noklusējuma, vai arī pieņem vērtību kā vērtību kur .

• Sākotnējā vērtība: auto
• Attiecas uz visiem elementiem, izņemot iekšējās kastes un iekšējās rubīna vai galda kastes
• Mantots: nē
• Procenti: n / a
• Aprēķinātā vērtība: norādītais atslēgvārds vai ciparu pāris
• Animācijas veids: diskrēts

Vērtības

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

Tas darbojas ar aizstātu un neaizstātu saturu

Ja jūs domājat: "Uhm, jā, vai pārlūks to jau nedara mūsu vietā uz attēliem?" atbilde ir: absolūti . Pārlūkprogrammas veic dažus izsmalcinātu malu attiecību aprēķinus par aizstātu saturu, piemēram, attēliem. Tātad, ja attēla, piemēram, platums ir 500 pikseļi, pārlūkprogramma pielāgo savus CSS izkārtojuma algoritmus, lai saglabātu attēla raksturīgās vai “dabiskās” dimensijas. aspect-ratioĪpašumu var izmantot, lai efektīvi ignorēt šos dabas dimensijas.

Bet neaizstātam saturam nav dabiskas proporcijas. Tā ir lielākā daļa lietu, ar kurām mēs strādājam, piemēram, divi. Tā vietā, lai mēģinātu saglabāt elementa dabiskās proporcijas, aspect-rationosaka “vēlamo” izmēru.

Pašlaik specifikācijā tiek atzīmēts, ka vecākās CSS specifikācijās, īpaši CSS 2.1, nav skaidras atšķirības starp aizstātu un neaizstātu saturu. Tas nozīmē, ka mēs varētu redzēt dažus papildu īpašus gadījumus, kas pievienoti spec, lai palīdzētu tos noskaidrot. Pagaidām mēs redzam, ka pārlūkprogrammas atbalsta atbalstu vēlamo malu attiecību iestatīšanai uz nomainītajiem un neaizstātajiem atsevišķi, kur dažas pārlūkprogrammas ar agrīnu atbalstu eksperimentālā karodziņa vietā var atbalstīt tikai aspect-rationeaizstātu saturu. Noteikti ir vērts sekot pārlūkprogrammas atbalstam, kad tas attīstās.

Tas darbojas pats par sevi, nenorādot widthvaiheight

Tātad, jā, mēs to varam vienkārši nomest uz šāda elementa:

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

... un elementa noklusējums width: autonetieši sāk iestatīt elementa izmērus.

Tas mainās, widthvai arī heightir uz tā paša elementa

Teiksim mums ir elements ar platumu 300pxun aspect-ratiopar 3/1.

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

Pēc būtības aspect-ratiovēlas pats aprēķināt elementa izmērus un darīs to, pamatojoties uz kontekstu, kurā tas tiek izmantots. Bet, to widthiemetot, tas stāsta proporcijas, lai aprēķinātu elementa malu attiecības lodziņu, izmantojot 300pxkā platumu. Rezultātā ir tā, it kā mēs tikko būtu rakstīti:

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

Tam ir jēga! Atcerieties, ka, ja nav norādīts widthvai heighttiek norādīts, pārlūkprogramma pieņem, ka tie ir autoun turpinās. Kad mēs sniedzam nepārprotamas vērtības widthun heightvērtības, tās pierod.

Dažās situācijās tas tiek ignorēts

Tas ir tas, kur lietas kļūst nedaudz prātīgas, jo ir gadījumi, kad tas aspect-ratiotiek ignorēts vai tā aprēķinus ietekmē citas īpašības. Tas ietver:

Kad abi widthun heightir deklarēts elementā

Mēs tikko redzējām, kā deklarēšana vai nu, widthvai heightelements ietekmēs aprēķinu aspect-ratio. Bet, ja elementam jau ir gan widthun height, gan tie tiek izmantoti nevis aspect-ratio. Tas prasa abas īpašības, lai tās ignorētu aspect-ratio; iestatot vienu heightvai otru, widthelementa malu attiecība netiks sadalīta.

Padara senes, vai ne? Ja, izmantojot kādu no šiem parametriem widthvai heightpiespiežot aspect-ratiošo vērtību izmantot aprēķinos, no tā loģiski izriet, ka abu izmantošana pilnībā pilnībā ignorēs aspect-ratio, jo abas vērtības jau ir norādītas un iestatītas.

Kad saturs iziet no attiecībām

Vienkārši sakot, ja jums ir elements ar malu attiecību un saturs ir tik garš, ka tas liek elementam paplašināties, tad elements paplašināsies. Un, ja elements paplašinās, mainās tā izmēri un tādējādi vairs nav malu attiecības. Tāpēc specifikācijā teikts, ka īpašums nosaka “vēlamo” malu attiecību. Tas ir vēlams, bet nav noteikts.

Nepatīk, kā tas darbojas? Iestatot min-height: 0;elementu, saturs var pārsniegt vēlamo malu attiecību, nevis to paplašināt.

Kad tas “zaudē” min-*un max-*īpašībām

Mēs vienkārši redzējām, kā tas darbojas, vai ne? Kad saturs pārsniedz lodziņa izmērus, aspect-ratiotas faktiski izzūd, jo lodziņš paplašinās līdz ar saturu. Mēs to varam ignorēt min-width: 0.

Tas ir tāpēc, ka visi min-*un max-*īpašības parasti kaujas widthun heightpar kundzību karu Box Model aprēķiniem. Piemēram:

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

Bet:

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

Tas ir tāpēc, ka min-widthvai nu tiek liegta widthpazemināšanās zem noteiktas vērtības, vai arī tas tiek ignorēts, jo widthiestatītais elements jau ir iestatījis elementu, kas pārsniedz nepieciešamo platumu. Pats iet uz min-height, max-widthun max-height.

Tā visa būtība: ja mēs iestatīsim abus min-*vai max-*rekvizītus uz tā paša elementa aspect-ratioun viņi “uzvarēs” widthvai height, tad tie tiks ignorēti aspect-ratio. Teicu, ka tas bija nedaudz prātīgs. ?

Pārlūkprogrammas atbalsts

IE	Mala	Firefox	Chrome	Safari	Opera
Nē	Nē	86 1.2,3	90 4	TP 5	Nē

Android Chrome	Android Firefox	Android pārlūks	iOS Safari	Opera Mobile
Nē	Nē	Nē	Nē	Nē

Vairāk informācijas

Raksts par 2020. gada 1. jūliju

Pirmais skatījums uz “malu attiecību”

Sara Cope