aspect-ratio 屬性和 padding hack 有什麼差別？

aspect-ratio 是原生屬性，直接寫 `aspect-ratio: 16 / 9` 即可，語意清楚也不需要額外容器。傳統的 padding-top 百分比技巧是在該屬性普及前的替代做法，現行瀏覽器已不需要。

為什麼我的比例算出來很奇怪？

化簡是用最大公因數，所以 1920×1080 會得到 16:9，但 1921×1080 這種非整除的尺寸就會得到很大的數字。這通常代表原始尺寸帶有一兩個像素的誤差，可以參考旁邊的小數值判斷最接近哪個標準比例。

CSS / FRONTEND · 瀏覽器內處理

由寬高算出最簡比例，或由比例推算缺少的一邊。

以最大公因數化簡，並比對常見的 16:9、4:3、1:1 等標準比例。

由尺寸求比例由比例求邊長

寬度

高度

比例16:9

小數值1.7778

標準比例16:9

aspect-ratio: 16 / 9;

輸入寬與高就會得到化簡後的比例、小數值，以及可直接使用的 `aspect-ratio` 宣告；若剛好符合 16:9、4:3、21:9 這類標準比例，工具也會直接標示出來。反向模式則是先選定比例再填入其中一邊，馬上算出另一邊，很適合等比縮放圖片或影片容器。

所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。

aspect-ratio 屬性和 padding hack 有什麼差別？: aspect-ratio 是原生屬性，直接寫 `aspect-ratio: 16 / 9` 即可，語意清楚也不需要額外容器。傳統的 padding-top 百分比技巧是在該屬性普及前的替代做法，現行瀏覽器已不需要。
為什麼我的比例算出來很奇怪？: 化簡是用最大公因數，所以 1920×1080 會得到 16:9，但 1921×1080 這種非整除的尺寸就會得到很大的數字。這通常代表原始尺寸帶有一兩個像素的誤差，可以參考旁邊的小數值判斷最接近哪個標準比例。