Cách dùng Máy tính tỷ lệ khung hình
- Nhập một tỷ lệ (hoặc bấm vào tỷ lệ thường dùng như 16:9 hoặc 9:16).
- Nhập chiều rộng để có chiều cao tương ứng, hoặc nhập chiều cao để có chiều rộng.
- Để tìm tỷ lệ của một ảnh hoặc màn hình có sẵn, nhập kích thước của nó trong mục Tìm tỷ lệ của một kích thước; bấm Dùng tỷ lệ này để thay đổi kích thước theo tỷ lệ đó.
- Sao chép CSS (
aspect-ratiocùng phương án dự phòng padding-top) và chọn một kích thước chuẩn từ bảng.
Tỷ lệ khung hình là gì?
Tỷ lệ khung hình là mối quan hệ theo tỷ lệ giữa chiều rộng và chiều cao, viết dưới dạng rộng:cao. Một video 1920 × 1080 và một video 1280 × 720 có kích thước khác nhau nhưng cùng tỷ lệ 16:9, nên có thể co giãn từ video này sang video kia mà không bị kéo giãn hay cắt xén. Giữ nguyên tỷ lệ khi đổi kích thước là cách tránh ảnh bị méo và xuất hiện viền đen.
Công thức tỷ lệ khung hình
- Chiều cao mới = chiều rộng mới × chiều cao tỷ lệ ÷ chiều rộng tỷ lệ, ví dụ 1280 × 9 ÷ 16 = 720.
- Chiều rộng mới = chiều cao mới × chiều rộng tỷ lệ ÷ chiều cao tỷ lệ, ví dụ 1080 × 16 ÷ 9 = 1920.
- Rút gọn kích thước: chia cả hai cạnh cho ước chung lớn nhất (UCLN). 1920 và 1080 có UCLN là 120, cho ra tỷ lệ 16:9.
Một số kích thước không rút gọn gọn gàng: 1366 × 768 (độ phân giải laptop phổ biến) rút gọn thành 683:384, xấp xỉ 16:9. Máy tính hiển thị cả tỷ lệ chính xác lẫn tỷ lệ phổ biến gần nhất.
Các tỷ lệ khung hình phổ biến và nơi sử dụng
| Tỷ lệ | Thập phân | Ứng dụng thường gặp |
|---|---|---|
| 16:9 | 1.778 | Video HD/4K, YouTube, màn hình, bản trình chiếu |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | TV và màn hình đời cũ, iPad, nhiều máy ảnh compact |
| 3:2 | 1.5 | Phim 35 mm, ảnh DSLR/mirrorless, laptop Surface |
| 1:1 | 1 | Bài đăng vuông trên mạng xã hội, ảnh đại diện, ảnh sản phẩm thu nhỏ |
| 4:5 | 0.8 | Bài đăng dọc trên Instagram và Facebook |
| 21:9 | ≈ 2.33 | Màn hình siêu rộng, video điện ảnh |
| 1.91:1 | 1.91 | Ảnh xem trước liên kết Open Graph (1200 × 630) |
Tỷ lệ khung hình trong CSS
Các trình duyệt hiện đại hỗ trợ thuộc tính aspect-ratio: aspect-ratio: 16 / 9; trên một phần tử có chiều rộng sẽ cho nó chiều cao tương ứng, rất phù hợp với video nhúng responsive, thẻ nội dung và khung giữ chỗ ảnh giúp tránh dịch chuyển bố cục (tốt cho chỉ số CLS trong Core Web Vitals). Kỹ thuật cũ hơn là padding-top hack: một phần tử bao ngoài với height: 0; padding-top: 56.25% (9 ÷ 16 × 100), vì giá trị padding dọc theo phần trăm được tính theo chiều rộng của phần tử. Cả hai đều đã được tạo sẵn ở trên. Với chính file ảnh, hãy dùng Image Resizer; để tạo ảnh xem trước liên kết, OG Image Generator tạo ảnh 1200 × 630.
Cũng được tìm dưới tên: tỷ lệ khung hình, tính tỷ lệ 16:9, tỷ lệ ảnh, tính chiều cao theo tỷ lệ, css aspect-ratio, tỷ lệ 4:3, tỷ lệ 9:16.
Các công cụ dùng kèm tốt với Máy tính tỷ lệ khung hình
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
- Chuyển đổi PX sang REM — Chuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet và chuyển đổi mọi giá trị px chỉ trong một lần.
- Máy tính phần trăm — Bảy phép tính phần trăm thường gặp, gom trong một trang.
- Máy tính chênh lệch múi giờ — Thêm các thành phố bạn quan tâm để xem chênh lệch múi giờ so với bạn, giờ địa phương hiện tại và đang là ban ngày hay ban đêm.
Câu hỏi thường gặp
Làm sao để tính chiều cao từ chiều rộng và tỷ lệ khung hình?
1920×1080 có phải là 16:9 không?
1080×1350 có tỷ lệ khung hình là bao nhiêu?
Giá trị padding-top cho 16:9 là bao nhiêu?
Trong CSS nên dùng aspect-ratio hay padding hack?
aspect-ratio; nó được mọi trình duyệt hiện tại hỗ trợ và không cần phần tử bao ngoài. Chỉ giữ padding hack nếu bạn bắt buộc phải hỗ trợ các trình duyệt rất cũ như Safari trước phiên bản 15.