Proporzioni - Trucchi CSS

La proprietà CSS aspect-ratioconsente di creare riquadri che mantengono dimensioni proporzionali in cui i heighte widthdi un riquadro vengono calcolati automaticamente come rapporto. È un po 'matematico, ma l'idea è che puoi dividere un valore per un altro su questa proprietà e il valore calcolato garantisce che una casella rimanga in quella proporzione.

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

aspect-ratioè definito nella specifica CSS Box Sizing Module Livello 4, attualmente in Working Draft. Ciò significa che è ancora in corso e ha una possibilità di cambiare. Ma con Chrome e Firefox che lo supportano dietro una bandiera sperimentale e Safari Technology Preview che aggiunge il supporto all'inizio del 2021, ci sono segnali forti che aspect-ratiostanno guadagnando molto slancio.

Sintassi

aspect-ratio: auto || ;

In parole povere: aspect-ratiosi presume che sia autodi default o accetta a come valore dove .

• Valore iniziale: auto
• Si applica a: tutti gli elementi tranne i riquadri in linea e i riquadri interni in rubino o tabella
• Ereditato: no
• Percentuali: n / a
• Valore calcolato: parola chiave specificata o coppia di numeri
• Tipo di animazione: discreta

Valori

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

Funziona su contenuti sostituiti e non sostituiti

Se stai pensando: "Uhm, sì, il browser non lo fa già per noi sulle immagini?" la risposta è: assolutamente . I browser eseguono calcoli elaborati sulle proporzioni sui contenuti sostituiti come le immagini. Quindi, se un'immagine ha, diciamo, una larghezza di 500 px, il browser flette i suoi algoritmi di layout CSS per mantenere le dimensioni intrinseche o "naturali" dell'immagine. La aspect-ratioproprietà può essere utilizzata per ignorare efficacemente quelle dimensioni naturali.

Ma il contenuto non sostituito non ha una proporzione naturale. Questa è la maggior parte delle cose con cui lavoriamo, come i div. Piuttosto che cercare di mantenere le proporzioni naturali dell'elemento, aspect-ratioimposta un dimensionamento "preferito".

Ora, la specifica attualmente rileva che le specifiche CSS precedenti, in particolare CSS 2.1, non contengono una chiara distinzione tra contenuto sostituito e non sostituito. Ciò significa che potremmo vedere alcuni casi speciali aggiuntivi aggiunti alle specifiche per chiarirli. Per il momento, stiamo vedendo i browser che implementano il supporto per l'impostazione delle proporzioni preferite su sostituiti e non sostituiti separatamente, dove alcuni dei browser con supporto iniziale dietro un flag sperimentale potrebbero supportare solo il aspect-ratiocontenuto non sostituito. Sicuramente vale la pena tenere d'occhio il supporto del browser man mano che si evolve.

Funziona da solo senza specificare un widthoheight

Quindi, sì, possiamo semplicemente rilasciarlo su un elemento come questo:

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

... e il valore predefinito dell'elemento width: autointerviene implicitamente per impostare le dimensioni dell'elemento.

Cambia quando widtho heightsono sullo stesso elemento

Supponiamo di avere un elemento con una larghezza di 300pxe una aspect-ratiodi 3/1.

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

Per sua natura, aspect-ratiovuole calcolare le dimensioni dell'elemento da solo e lo farà in base al contesto in cui viene utilizzato. Ma con quello widthinserito, dice alle proporzioni di calcolare il riquadro delle proporzioni dell'elemento usando 300pxcome larghezza. Di conseguenza, è come se fossimo appena scritti:

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

Questo ha senso! Ricorda, quando no widtho heightsono specificati, il browser presume che siano autoe va da lì. Quando forniamo valori espliciti widthe height, questi sono ciò che viene utilizzato.

In alcune situazioni viene ignorato

È qui che le cose diventano un po 'complicate perché ci sono casi in cui aspect-ratioviene trascurato o i suoi calcoli sono influenzati da altre proprietà. Quello include:

Quando entrambi widthe heightsono dichiarati sull'elemento

Abbiamo appena visto come la dichiarazione di o widtho heightsu un elemento influenzerà il calcolo di aspect-ratio. Ma se l'elemento ha già sia un widthche height, questi vengono utilizzati invece di aspect-ratio. Richiede l'override di entrambe le proprietà aspect-ratio; l'impostazione heighto widthda sola non interromperà le proporzioni dell'elemento.

Fa senes, giusto? Se si utilizza widtho si heightobbliga aspect-ratioa utilizzare quel valore nel calcolo, ne consegue logicamente che l'utilizzo di entrambi sovrascriverà completamente del aspect-ratiotutto poiché entrambi i valori sono già forniti e impostati.

Quando il contenuto supera il rapporto

In poche parole, se hai un elemento con proporzioni e il contenuto è così lungo da costringere l'elemento a espandersi, l'elemento si espanderà. E se l'elemento si espande, le sue dimensioni cambiano e, quindi, non più le proporzioni. Questo è il motivo per cui la specifica dice che la proprietà imposta le proporzioni "preferite". È preferito, ma non prescritto.

Non ti piace come funziona? L'impostazione min-height: 0;dell'elemento consentirà al contenuto di superare le proporzioni preferite invece di espanderlo.

Quando "perde" a min-*e max-*proprietà

Abbiamo appena visto come funziona, giusto? Quando il contenuto supera le dimensioni della scatola, il contenuto aspect-ratioè effettivamente sparito perché la scatola si espande con il contenuto. Possiamo ignorarlo con min-width: 0.

Questo perché tutte le proprietà min-*e max-*tipicamente combattono widthe heightper la supremazia nella guerra sui calcoli del Box Model. Per esempio:

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

Ma:

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

Questo perché min-widtho impedisce widthdi andare al di sotto di un valore specifico, oppure viene ignorato perché widthha già impostato l'elemento oltre la larghezza minima che deve essere. La stessa cosa vale per min-height, max-widthe max-height.

Il punto di tutto questo: se impostiamo sia una proprietà min-*o max-*sullo stesso elemento di aspect-ratioe loro "vincono" su widtho height, allora quelle avranno la precedenza aspect-ratio. Te l'avevo detto che era un po 'sconvolgente. ?

Supporto del browser

IE	Bordo	Firefox	Cromo	Safari	musica lirica
No	No	86 1.2,3	90 4	TP 5	No

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mobile
No	No	No	No	No

Maggiori informazioni

Articolo del 1 luglio 2020

Un primo sguardo alle "proporzioni"

Sara Cope