長寬比計算器與 CSS 生成 - TikTok/IG 尺寸預設

快速計算長寬比與缺失尺寸（輸入寬得高/輸入高得寬），內置 TikTok 9:16、YouTube 16:9、Instagram 4:5 等預設，並自動生成 aspect-ratio CSS 代碼。全程本機運行不上傳。

:
16:9
1920px
1080px
 
 
 
 
 
如何使用
 
    

  1. 選擇預設比例（如 9:16 / 16:9 / 4:5）或手動輸入比例。
    2. 

  2. 輸入已知寬度或高度。
    3. 

  3. 工具自動計算另一邊的尺寸。
    4. 

  4. 複製生成的 CSS aspect-ratio 代碼用於布局。
    5. 



 
 
 
核心功能
 
    

  • TikTok/Reels (9:16)：一鍵套用豎屏主流比例與常見解析度思路。
    • 

  • 生成 aspect-ratio CSS：自動生成 aspect-ratio: W/H; 及兼容性建議。
    • 

  • 自動推算尺寸：輸入寬或高即可計算另一邊，保持比例不變。
    • 

  • 可視化比例預覽：實時顯示矩形預覽，避免尺寸填錯。
    • 

  • 本機隱私：尺寸與素材資訊不上傳伺服器。
    • 



 
 
 
相關工具
 
  
Lorem Ipsum 假文生成器 (JSON/HTML) - 開發者友好
 
生成用於設計與前端開發的 Lorem Ipsum 假文，支援純文字、HTML <p> 標籤與 JSON 數組輸出。可變長度（段落/句子/單字），並支援中文假文。全程本機生成不上傳。
  
顏色格式轉換與 WCAG 對比度檢測器
 
在 HEX、RGB、HSL、CMYK 之間實時轉換顏色，並自動計算 WCAG 無障礙對比度（AA/AAA）。支援印刷用 CMYK 百分比與可視化預覽。全程本機處理不上傳。
  
免費圖片取色器與調色板生成器
 
選擇、拖曳或貼上圖片，在瀏覽器本機吸取像素顏色，複製 HEX/RGB/HSL，並提取圖片主色調色板。
  
 
 
 
計算邏輯
 
    

  • 計算公式：
[
H = W \times \frac{r_H}{r_W}
]
或
[
W = H \times \frac{r_W}{r_H}
]
    • 

  • CSS 寫法示例：
[
\text{aspect-ratio}: \frac{16}{9}
]
    • 



 
 
 
常見問題
 
影片平臺（TikTok/Reels）的最佳比例是多少？


標準比例是 9:16（豎屏），常見解析度爲 1080×1920。使用 9:16 預設可快速核對尺寸。


如何在 CSS 中使用長寬比？


直接寫 aspect-ratio: 16/9;。本工具會生成包含該屬性的代碼片段，並建議必要的尺寸回退。


資料安全嗎？會上傳到伺服器嗎？


不會。所有計算與預覽在瀏覽器本機完成，不上傳任何尺寸或內容。


是否免費？可以用於商業項目嗎？


免費使用，適合個人/團隊在內容生產與 UI 開發中快速對齊尺寸。


爲什麼會出現 1–2 像素誤差？


某些尺寸需要取整（整數像素）。工具會按最接近的整數進行四捨五入，保證比例儘量準確。