Thuộc tính aspect-ratio

Thuộc tính aspect-ratio thiết lập căn chỉnh các phần tử dọc theo trục phụ cho các khối flex và theo trục ngang cho lưới. Áp dụng cho phần tử cha.

Cú pháp

cssbộ chọn {
  aspect-ratio: auto hoặc tỷ lệ;
}

Giá trị	Mô tả
`auto`	Phần tử không có tỷ lệ khung hình ưa thích và trình duyệt thiết lập nó tự động, dựa trên chiều rộng và chiều cao của phần tử.
`tỷ lệ`	Tỷ lệ được ghi dưới dạng `16/9`, ở đây số đầu tiên là chiều rộng, và số thứ hai là chiều cao. Nếu bất kỳ giá trị nào không được chỉ định, thì nó được coi là bằng `1`. Cũng một số tỷ lệ có thể được ghi bằng một số. Ví dụ, `2/1` có thể được ghi là `0.5`, điều này sẽ cho kết quả giống nhau.
`auto && tỷ lệ`	Nếu tỷ lệ khung hình đi cùng với từ khóa `auto` (ví dụ: `auto` `1/2`), thì tỷ lệ đã chỉ định sẽ được chọn, nhưng đối với các phần tử thay thế (như hình ảnh và video) với tỷ lệ khung hình riêng chỉ tỷ lệ đó mới được sử dụng.

Hãy thiết lập tỷ lệ khung hình tự động cho nút bấm:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Bây giờ hãy thiết lập tỷ lệ khung hình cho nút bấm là 1/2:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат: