先看這個例子
空白示範框闊 240px,aspect-ratio 為 16/9,高度自動。本例只預留版面位置,沒有載圖、裁圖或匯出。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 初始闊度 | 240×9/16 | 高 135px |
| 較窄框 | 改闊度為 160 | 高 90px |
| 內容結果 | 查看原始碼 | 沒有圖片,也沒有聲稱圖片放入結果 |
瀏覽器怎樣處理
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。這是框尺寸,不是匯出圖片尺寸。
- 量度真正框尺寸,不推定圖片衍生檔。
- 本比例工作至少保留一邊自動尺寸。