UTILS.
100% trong trình duyệt

Hộp tỉ lệ khung hình CSS

Tạo hộp tỉ lệ khung hình responsive kèm phương án padding dự phòng.

Về công cụ này

Nhập tỉ lệ chiều rộng và chiều cao để tạo một hộp tỉ lệ khung hình responsive, kèm cả CSS aspect-ratio hiện đại lẫn phương án dự phòng bằng phần trăm padding-top, tất cả ngay trong trình duyệt của bạn.

Câu hỏi thường gặp

Vì sao kèm phương án dự phòng padding-top?
Mẹo dùng phần trăm padding-top tái tạo một tỉ lệ khung hình cố định trên các trình duyệt cũ không hỗ trợ thuộc tính aspect-ratio hiện đại.
Tỉ lệ có được rút gọn không?
Có — các giá trị như 16 và 9 được rút gọn theo ước chung lớn nhất, nên 1920 trên 1080 hiển thị thành 16 / 9.

Công cụ khác