Khái quát
Trong CSS, "aspect-ratio" là một thuộc tính được sử dụng để xác định tỷ lệ giữa chiều rộng và chiều cao của một phần tử. Nó cho phép bạn xác định tỷ lệ mà phần tử sẽ giữ nguyên trong khi thay đổi kích thước.
Thuộc tính "aspect-ratio" có thể được sử dụng để xác định tỷ lệ khung hình cho hộp chứa (container) hoặc hình ảnh. Giá trị của thuộc tính này là một cặp số, ví dụ: aspect-ratio: 16/9. Điều này có nghĩa là phần tử sẽ có tỷ lệ 16:9 giữa chiều rộng và chiều cao của nó.
Khi sử dụng thuộc tính "aspect-ratio", bạn có thể điều chỉnh kích thước của phần tử một cách tự động dựa trên tỷ lệ được xác định. Ví dụ, nếu bạn có một hình ảnh với tỷ lệ 16:9 và muốn nó tự động thay đổi kích thước sao cho luôn giữ nguyên tỷ lệ này, bạn có thể sử dụng "aspect-ratio" để làm điều đó.
Ví dụ
Đây là một ví dụ về cách sử dụng thuộc tính "aspect-ratio" trong CSS:
Tiếp tục từ ví dụ trước, chúng ta có thể sử dụng thuộc tính "aspect-ratio" để tạo ra các hình ảnh có kích thước tự động và giữ nguyên tỷ lệ.
Ví dụ, giả sử bạn có một hình ảnh có tỷ lệ 4:3 và muốn nó hiển thị trong một hộp chứa có chiều rộng xác định. Bạn có thể sử dụng thuộc tính "aspect-ratio" để làm điều đó:
Trong ví dụ này, chúng ta đã định rõ chiều rộng của hộp chứa là 400px bằng cách sử dụng thuộc tính "width". Sau đó, chúng ta áp dụng thuộc tính "aspect-ratio" với giá trị 4/3 cho phần tử hình ảnh bên trong. Thuộc tính "width" của hình ảnh được đặt là 100% để nó căn chỉnh theo chiều rộng của hộp chứa, và thuộc tính "height" được đặt là "auto" để chiều cao của hình ảnh tự động điều chỉnh để giữ nguyên tỷ lệ 4:3.
Kết quả là, hình ảnh sẽ hiển thị trong hộp chứa có kích thước 400px chiều rộng và chiều cao được tính toán tự động để giữ nguyên tỷ lệ 4:3.
Chúng ta cũng có thể sử dụng các giá trị khác cho thuộc tính "aspect-ratio" như số thập phân, ví dụ: aspect-ratio: 1.5. Điều này sẽ xác định tỷ lệ 3:2 giữa chiều rộng và chiều cao của phần tử.