寬高比

寬高比是元素或視口的寬度和高度之間的比例關係。它表示為兩個數字的<ratio>。

擁有寬高比，無論是影像和影片固有的寬高比，還是外部設定的寬高比，都可以保持元素的預期比例。你還可以查詢元素或視口的寬高比，這對於開發靈活的元件和佈局非常有用。

在 CSS 中，<ratio> 資料型別寫為 width / height（例如，正方形為 1 / 1，寬屏為 16 / 9）或單個數字，在這種情況下，該數字表示寬度，高度為 1。

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

在 SVG 中，寬高比由一個四值viewBox 屬性定義。前兩個值是 SVG 可以具有的最小 X 和 Y 原點座標，後兩個值是設定 SVG 寬高比的寬度和高度。

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

在 JavaScript API 中，查詢寬高比會返回一個雙精度浮點數，表示寬度除以高度。你還可以使用 JavaScript 設定元素的寬高比。例如，使用 MediaStreamTrack 或 MediaTrackSettings 字典的 aspectRatio 屬性為 1920x1080 影片設定寬高比約束將計算為 16/9 或 1920/1080，即 1.7777777778

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

myTrack.applyConstraints(constraints);