Tỷ lệ khung hình trong CSS

Công cụ này tạo CSS cho tỷ lệ khung hình rộng:cao bằng thuộc tính hiện đại `aspect-ratio` hoặc thủ thuật padding phần trăm cổ điển. Nó cung cấp các cài đặt sẵn tỷ lệ phổ biến, ô nhập chiều rộng/chiều cao tùy chỉnh (1-100), hộp xem trước trực tiếp và đầu ra sẵn sàng để sao chép. Xem trước điều chỉnh kết xuất theo phương pháp đã chọn để bạn thấy chính xác mỗi kỹ thuật tạo ra điều gì.

1. Nhấp vào một cài đặt sẵn Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) hoặc nhập Width và Height tùy chỉnh (1-100). 2. Chọn Method: Modern (`aspect-ratio`) hoặc Padding Hack. 3. Hộp Preview kết xuất tỷ lệ bằng kỹ thuật đã chọn. 4. Nhấp vào Copy trên thẻ Output để sao chép CSS đã tạo.

Modern xuất một dòng: `aspect-ratio: <width> / <height>;`. Padding Hack xuất một `.container` với `position: relative; width: 100%; padding-top: <height/width*100>%;` và một `.content` định vị tuyệt đối lấp đầy nó, đây là kỹ thuật cũ cho môi trường không hỗ trợ `aspect-ratio`. Xem trước sử dụng cùng các kiểu, giới hạn ở chiều rộng tối đa 400px, do đó kết quả hình ảnh khớp với kỹ thuật mà CSS mô tả.