Công cụ tính tỷ lệ khung hình CSS là gì?
Công cụ này chuyển đổi bất kỳ giá trị chiều rộng và chiều cao tính bằng pixel thành một tỷ lệ khung hình gọn gàng, đã rút gọn như 16:9 hay 4:3. Ngoài ra, nó còn tính giá trị padding-top theo phần trăm — một mẹo quen thuộc giúp giữ các khung responsive (video, iframe, ảnh) đúng theo tỷ lệ cố định, vốn rất phổ biến trước khi thuộc tính CSS aspect-ratio được hầu hết trình duyệt hỗ trợ.
Cách sử dụng
Nhập chiều rộng và chiều cao gốc theo đơn vị pixel. Công cụ sẽ rút gọn tỷ lệ về dạng tối giản bằng ước số chung lớn nhất (GCD), hiển thị tỷ lệ thập phân (chiều rộng ÷ chiều cao) và cung cấp giá trị padding-top % để bạn dán thẳng vào CSS của mình.
Giải thích công thức
Trước tiên, tìm GCD của chiều rộng và chiều cao. Chia cả hai con số cho GCD sẽ ra tỷ lệ rút gọn.
$$\text{Tỷ lệ} = \frac{\text{Chiều rộng}}{\gcd} : \frac{\text{Chiều cao}}{\gcd}$$Ví dụ, 1920 và 1080 có GCD là 120, nên tỷ lệ trở thành 16:9. Mẹo padding-top dùng công thức chiều cao ÷ chiều rộng × 100, bởi vì phần trăm padding trong CSS luôn được tính dựa trên chiều rộng của phần tử.
Ví dụ minh họa
Với một bức ảnh 1920×1080: GCD(1920, 1080) = 120. Tỷ lệ = \(1920/120 : 1080/120 =\) 16:9. Thập phân = \(1920 \div 1080 \approx 1{,}7778\). Padding-top = \(1080 \div 1920 \times 100 =\) 56,25%. Vậy một khung responsive sẽ dùng padding-top: 56.25%.
Câu hỏi thường gặp
Tại sao nên dùng padding-top thay vì thuộc tính aspect-ratio? Mẹo padding-top hoạt động trên mọi trình duyệt, kể cả những phiên bản rất cũ. Còn với các dự án hiện đại, bạn chỉ cần dùng aspect-ratio: 16 / 9;.
Phần trăm được tính dựa trên chiều rộng hay chiều cao? Phần trăm padding theo chiều dọc trong CSS luôn được tính dựa trên chiều rộng của khối chứa, đó là lý do công thức là chiều cao ÷ chiều rộng.
Nếu các con số của tôi không rút gọn đẹp thì sao? Bất kỳ chiều rộng và chiều cao nào cũng cho ra một tỷ lệ hợp lệ; chỉ là nó có thể không trùng với một cái tên quen thuộc như 16:9. Trong những trường hợp đó, tỷ lệ thập phân sẽ rất hữu ích.
