跳至內容
Astera Technology

內容未到,先留好合比例的位置

先訂闊度,再用 16:9 比例推算自動高度,不用替每個闊度寫死高。

空框闊 240px,高度預留 135px。

下載完整個案資料及參考答案 ↓

先看這個例子

空白示範框闊 240px,aspect-ratio 為 16/9,高度自動。本例只預留版面位置,沒有載圖、裁圖或匯出。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
初始闊度240×9/16高 135px
較窄框改闊度為 160高 90px
內容結果查看原始碼沒有圖片,也沒有聲稱圖片放入結果
下載可編輯 CSV ↓

瀏覽器怎樣處理

aspect-ratio 提供偏好比例,讓自動尺寸可從另一邊推算。若兩邊都有明確尺寸,它不會強行改掉兩個值。這個框的量度結果,與既有等比放圖工作表不同。

兩邊寫死,就不再由自動高度套比例

反例保留闊 240 及比例,另加 height100px。

反例原始碼,請另開例子核對
<style>body{margin:8px}</style>
<style>.stage{width:240px;height:100px;aspect-ratio:16/9;background:#e3efe8}</style><section class="stage" aria-label="預留預覽位置"></section>

實際框是 240×100,不是 240×135。

試着修正

自動高度的框若闊 320px,16:9 會得出多高?

查看參考答案

180px,即 320×9/16。這是框尺寸,不是匯出圖片尺寸。

  • 量度真正框尺寸,不推定圖片衍生檔。
  • 本比例工作至少保留一邊自動尺寸。

原始例子檔案

相關資源