Aspect Ratio

Le Aspect Ratio i sono la relazione proporzionale tra la larghezza e l’altezza di un elemento o di una finestra, e sono rappresentate da un rapporto o due numeri.

Avere una proporzione, che sia una proporzione intrinseca come per le immagini e i video o se è impostata estrinsecamente, mantiene le proporzioni previste di un elemento. Puoi anche interrogare l’aspetto di un elemento o di una finestra, il che è utile nello sviluppo di componenti e layout flessibili.

In CSS, il tipo di dati <ratio> è scritto come larghezza / altezza (ad esempio, 1 / 1 per un quadrato, 16 / 9 per uno schermo panoramico) o un singolo numero, nel qual caso il numero rappresenta la larghezza e l’altezza è 1.

CSS

.wideBox {
aspect-ratio: 5 / 2;
}
.tallBox {
aspect-ratio: 0.25;
}

In SVG, le proporzioni sono definite dall’attributo viewBox a quattro valori. I primi due valori sono le coordinate di origine X e Y più piccole che l’SVG può avere, e i secondi due valori sono la larghezza e l’altezza che impostano le proporzioni dell’SVG.

SVG
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"></svg>

Nelle API JavaScript, la query di una proporzione restituisce un numero in virgola mobile a doppia precisione che rappresenta la larghezza divisa per l’altezza. Puoi anche usare JavaScript per impostare le proporzioni di un elemento. Ad esempio, impostando un vincolo di aspect ratio per un video 1920×1080 utilizzando la proprietà aspectRatio del dizionario MediaStreamTrack o MediaTrackSettings verrebbe calcolato come 16/9, o 1920/1080, che è 1.7777777778:

JS
const constraints = {
width: 1920,
height: 1080,
aspectRatio: 1.777777778,
};

myTrack.applyConstraints(constraints);

Vedi anche