CSS宽高比检测工具
免费在线使用 CSS宽高比检测工具 无需安装即可使用工具
關於 CSS 寬高比
這個工具為寬:高寬高比產生 CSS，可以使用現代的 `aspect-ratio` 屬性，也可以使用經典的百分比 padding hack。它提供了常見的比例預設、自訂的寬/高輸入（1-100）、一個即時預覽框和可直接複製的輸出。預覽會根據所選方法調整呈現方式，讓您準確看到每種技術產生什麼效果。
如何使用
1. 點擊一個常見比例預設（16:9、4:3、1:1、21:9、3:2、2:3、9:16），或輸入自訂的寬和高（1-100）。 2. 選擇一種方法：Modern（`aspect-ratio`）或 Padding Hack。 3. Preview 框會使用所選技術呈現該比例。 4. 在 Output 卡片上點擊 Copy 以複製產生的 CSS。
方法與產生的 CSS
Modern 輸出一行程式碼：`aspect-ratio: <width> / <height>;`。Padding Hack 輸出一個 `.container`，包含 `position: relative; width: 100%; padding-top: <height/width*100>%;` 以及一個填滿它的絕對定位 `.content`，這是在不支援 `aspect-ratio` 的環境下的傳統方案。預覽使用相同的樣式，最大寬度被限制在 400px，因此視覺效果與 CSS 描述的技術一致。
▶什麼時候應該使用 Padding Hack 而不是 Modern？
在當前瀏覽器中使用 Modern（`aspect-ratio`）；它更簡單，且自 2021 年起已得到良好支援。僅當您必須支援缺少 `aspect-ratio` 的非常舊的瀏覽器（例如舊版 IE 或 2021 年前的 Safari）時，才使用 Padding Hack。
▶寬和高輸入可以接受什麼範圍？
兩者都被限制在最小值 1 和最大值 100 之間。超出該範圍的值會被強制取最近的邊界值。
▶工具會輸出 HTML 和 CSS 嗎？
只產生 CSS。對於 Padding Hack，它會輸出 `.container` 和 `.content` 規則，但您需要自己新增匹配的 HTML 結構。
▶為什麼兩種方法的預覽看起來不同？
每種方法都使用真實的 CSS 呈現（Modern 使用 `aspect-ratio`，Padding Hack 使用 `padding-top` 和絕對定位的內部方塊），因此預覽展示的是實際技術，而不是偽造的比例。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。