Tỷ lệ khung hình - Thủ thuật CSS

Thuộc tính CSS aspect-ratiocho phép bạn tạo các hộp duy trì kích thước tỷ lệ trong đó giá trị heightvà widthcủa một hộp được tính toán tự động theo tỷ lệ. Đó là một phép toán-y nhỏ, nhưng ý tưởng là bạn có thể chia một giá trị này cho một giá trị khác trên thuộc tính này và giá trị được tính toán đảm bảo một hộp nằm trong tỷ lệ đó.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratiođược định nghĩa trong đặc tả mô-đun kích thước hộp CSS cấp độ 4, hiện đang trong Bản thảo làm việc. Điều đó có nghĩa là nó vẫn đang được tiến hành và có cơ hội thay đổi. Nhưng với việc Chrome và Firefox hỗ trợ nó đằng sau một lá cờ thử nghiệm và Safari Technology Preview thêm hỗ trợ cho nó vào đầu năm 2021, có những tín hiệu mạnh mẽ aspect-ratiođang đạt được rất nhiều động lực.

Cú pháp

aspect-ratio: auto || ;

Trong tiếng Anh thuần túy: aspect-ratiođược giả định là autotheo mặc định hoặc chấp nhận một giá trị ở đó .

• Giá trị ban đầu: auto
• Áp dụng cho: tất cả các phần tử ngoại trừ hộp nội tuyến và hộp ruby ​​bên trong hoặc hộp bảng
• Kế thừa: không
• Phần trăm: n / a
• Giá trị được tính toán: từ khóa được chỉ định hoặc một cặp số
• Loại hoạt ảnh: rời rạc

Giá trị

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Nó hoạt động trên nội dung thay thế và không thay thế

Nếu bạn đang nghĩ, "Uhm, vâng, không phải trình duyệt đã làm điều này cho chúng tôi trên hình ảnh?" câu trả lời là: hoàn toàn . Trình duyệt thực hiện một số tính toán tỷ lệ khung hình ưa thích trên nội dung được thay thế như hình ảnh. Vì vậy, nếu một hình ảnh có chiều rộng 500px, chẳng hạn, trình duyệt sẽ linh hoạt các thuật toán bố cục CSS của nó để duy trì kích thước nội tại hoặc "tự nhiên" của hình ảnh. Các aspect-ratiobất động sản có thể được sử dụng để ghi đè lên một cách hiệu quả những khía cạnh tự nhiên.

Nhưng nội dung không thay thế không có tỷ lệ tự nhiên. Đó là hầu hết những thứ chúng tôi làm việc, như div. Thay vì cố gắng duy trì tỷ lệ tự nhiên của phần tử, hãy aspect-ratiođặt kích thước "ưa thích".

Bây giờ, thông số kỹ thuật hiện lưu ý rằng các đặc tả CSS cũ hơn, đặc biệt là CSS 2.1, không có sự phân biệt rõ ràng giữa nội dung được thay thế và không được thay thế. Điều đó có nghĩa là chúng tôi có thể thấy một số trường hợp đặc biệt bổ sung được thêm vào thông số kỹ thuật để giúp làm rõ chúng. Hiện tại, chúng tôi đang thấy các trình duyệt triển khai hỗ trợ đặt tỷ lệ khung hình ưa thích trên thay thế và không thay thế riêng biệt, trong đó một số trình duyệt có hỗ trợ sớm đằng sau cờ thử nghiệm có thể chỉ hỗ trợ aspect-ratiocho nội dung không bị thay thế. Chắc chắn đáng để theo dõi hỗ trợ trình duyệt khi nó phát triển.

Nó tự hoạt động mà không cần chỉ định một widthhoặcheight

Vì vậy, vâng, chúng ta có thể chỉ cần thả nó vào một phần tử như sau:

.element ( aspect-ratio: 16 / 9; )

… Và mặc định của phần tử hoạt động width: autongầm để thiết lập kích thước của phần tử.

Nó thay đổi khi widthhoặc heighttrên cùng một phần tử

Giả sử chúng ta có một phần tử có chiều rộng là 300pxvà aspect-ratiobằng 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Theo bản chất, aspect-ratiomuốn tự tính toán các kích thước của phần tử và sẽ làm như vậy dựa trên ngữ cảnh nơi nó được sử dụng. Nhưng với điều đó width, nó cho biết tỷ lệ khung hình để tính toán hộp tỷ lệ khung hình của phần tử sử dụng 300pxlàm chiều rộng. Kết quả là, nó giống như chúng ta vừa được viết:

.element ( height: 100px; width: 300px; )

Điều này thật ý nghĩa! Hãy nhớ rằng, khi không có widthhoặc heightđược chỉ định, trình duyệt sẽ giả định những điều đó là có autovà bắt đầu từ đó. Khi chúng tôi cung cấp các giá trị widthvà nội dung rõ ràng height, đó là những gì được sử dụng.

Nó bị bỏ qua trong một số tình huống

Đây là lúc mọi thứ trở nên khó khăn vì có những trường hợp aspect-ratiobị bỏ qua hoặc các tính toán của nó bị ảnh hưởng bởi các thuộc tính khác. Điều đó bao gồm:

Khi cả hai widthvà heightđược khai báo trên phần tử

Chúng ta vừa thấy việc khai báo một trong hai widthhoặc heighttrên và phần tử sẽ ảnh hưởng như thế nào đến việc tính toán aspect-ratio. Nhưng nếu phần tử đã có cả a widthvà height, chúng được sử dụng thay vì aspect-ratio. Nó yêu cầu cả hai thuộc tính để ghi đè aspect-ratio; việc đặt một trong hai heighthoặc widthmột mình sẽ không phá vỡ tỷ lệ co của phần tử.

Làm cho senes, phải không? Nếu sử dụng một trong hai widthhoặc heightbuộc aspect-ratiophải sử dụng giá trị đó trong phép tính, thì theo logic, việc sử dụng cả hai sẽ hoàn toàn ghi đè aspect-ratiohoàn toàn vì cả hai giá trị đều đã được cung cấp và đặt.

Khi nội dung vượt ra khỏi tỷ lệ

Nói một cách đơn giản, nếu bạn có một phần tử có tỷ lệ khung hình và nội dung dài đến mức nó buộc phần tử đó phải mở rộng, thì phần tử đó sẽ mở rộng. Và nếu phần tử mở rộng, kích thước của nó sẽ thay đổi và do đó, không còn tỷ lệ co. Đây là lý do tại sao thông số cho biết thuộc tính đặt tỷ lệ khung hình "ưu tiên". Nó được ưa thích, nhưng không được kê đơn.

Không thích cách đó hoạt động? Cài đặt min-height: 0;trên phần tử sẽ cho phép nội dung vượt qua tỷ lệ co ưa thích thay vì mở rộng nó.

Khi nó "thua" min-*và max-*thuộc tính

Chúng tôi chỉ biết cách hoạt động của nó, phải không? Khi nội dung vượt quá kích thước của hộp, nội dung aspect-ratiosẽ biến mất vì hộp mở rộng theo nội dung. Chúng tôi có thể ghi đè điều đó với min-width: 0.

Đó là bởi vì tất cả các thuộc tính min-*và max-*thuộc tính thường chiến đấu widthvà heightgiành quyền tối cao trong cuộc chiến trên các tính toán của Mô hình Hộp. Ví dụ:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Nhưng:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Đó là vì min-widthngăn cản việc widthđi xuống dưới một giá trị cụ thể hoặc nó bị bỏ qua bởi vì widthtập hợp đã đặt phần tử vượt quá chiều rộng tối thiểu mà nó cần. Điều tương tự cũng đi cho min-height, max-widthvà max-height.

Điểm mấu chốt của tất cả điều này: nếu chúng ta đặt cả một min-*hoặc thuộc max-*tính trên cùng một phần tử aspect-ratiovà chúng “thắng” hơn widthhoặc height, thì những thuộc tính đó sẽ ghi đè aspect-ratio. Đã nói với bạn rằng đó là một chút suy nghĩ khó khăn. ?

Hỗ trợ trình duyệt

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	Không	86 1,2,3	90 4	TP 5	Không

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mobile
Không	Không	Không	Không	Không

Thêm thông tin

Bài báo vào ngày 1 tháng 7 năm 2020

Cái nhìn đầu tiên về `tỷ lệ khung hình '

Sara Cope