Cách sử dụng
- Để đổi kích thước, nhập tỷ lệ (ví dụ 16 và 9) hoặc chọn tỷ lệ phổ biến, sau đó nhập chiều rộng hoặc chiều cao. Kích thước còn lại sẽ được tính.
- Để tìm tỷ lệ, nhập chiều rộng và chiều cao của ảnh, màn hình hoặc video.
- Xem phần xem trước và sao chép quy tắc CSS aspect-ratio nếu bạn cần dùng trong bố cục web.
Cách hoạt động
Thay đổi kích thước theo tỷ lệ dùng công thức chiều cao = chiều rộng × chiều cao của tỷ lệ ÷ chiều rộng của tỷ lệ (và ngược lại). Kích thước pixel thường là số nguyên nên kết quả có thể được làm tròn; khi phép chia theo tỷ lệ không ra số nguyên, chẳng hạn tỷ lệ 16:9 với chiều rộng 1000, chiều cao đã làm tròn (563) chỉ là giá trị gần đúng, không hoàn toàn chính xác.
Kích thước được rút gọn bằng cách chia cả hai số cho ước chung lớn nhất: 1920 và 1080 cùng chia hết cho 120, cho ra tỷ lệ 16:9. Một số kích thước thực tế không rút gọn thành tỷ lệ quen thuộc. 1366×768 chính xác bằng 683:384, rất gần với 16:9, vì vậy công cụ cũng hiển thị tỷ lệ phổ biến gần nhất nếu độ lệch không quá 2%. Tương tự, màn hình “21:9” thực chất có tỷ lệ 64:27 (2560×1080) hoặc 43:18 (3440×1440); 21:9 là tên gọi tiếp thị.
Trong CSS, aspect-ratio: 16 / 9 giúp phần tử giữ nguyên hình dạng khi chiều rộng thay đổi. Điều này hữu ích với video nhúng và vùng giữ chỗ cho hình ảnh để bố cục không bị xê dịch trong lúc tải.
Ví dụ
Kích thước hình thu nhỏ video
Hình thu nhỏ video tỷ lệ 16:9 cần cao 720 pixel nếu chiều rộng là 1280 pixel.
Xác định tỷ lệ màn hình
2560×1600 rút gọn thành 8:5, tương đương 16:10, tỷ lệ phổ biến trên máy tính xách tay.
Cắt ảnh dọc cho mạng xã hội
Với tỷ lệ 4:5 và chiều rộng 1080, chiều cao là 1350, phù hợp với định dạng dọc được nhiều bảng tin chấp nhận.
Câu hỏi thường gặp
16:9 có giống 1,78:1 không?
Có. 16 ÷ 9 ≈ 1,778, nên hai cách viết này mô tả cùng một hình dạng. Tỷ lệ khung hình điện ảnh thường được biểu thị bằng số thập phân, chẳng hạn 2,39:1.
Tại sao kết quả có số thập phân?
Không phải chiều rộng nào cũng chia hết cho tỷ lệ. Bật chế độ làm tròn khi tính kích thước theo pixel; kết quả sẽ là số pixel nguyên gần nhất và có thể lệch một phần pixel so với tỷ lệ chính xác.
Thuộc tính CSS aspect-ratio có hoạt động trên mọi trình duyệt không?
Thuộc tính này được hỗ trợ trên tất cả trình duyệt chính hiện nay. Nếu một phần tử cũng được đặt rõ cả chiều rộng lẫn chiều cao, các giá trị đó sẽ được ưu tiên thay cho aspect-ratio.
Quyền riêng tư
Mọi phép tính đều chạy trên trình duyệt của bạn. Không có dữ liệu nào được gửi đi hoặc lưu lại.