aspect-ratio

Try it

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>

#example-element {
  height: 100%;
  width: auto;
}

Cú pháp

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* dự phòng về 'auto' cho các phần tử thay thế */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Giá trị toàn cục */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

Thuộc tính này được chỉ định là một hoặc cả hai từ khóa auto hoặc <ratio>. Nếu cả hai được cung cấp và phần tử là replaced element, chẳng hạn như <img>, thì tỷ lệ đã cho được sử dụng cho đến khi nội dung được tải. Sau khi nội dung được tải, giá trị auto được áp dụng, vì vậy tỷ lệ intrinsic của nội dung được tải được sử dụng.

Nếu phần tử không phải là replaced element, thì ratio đã cho được sử dụng.

Giá trị

auto

Replaced elements với tỷ lệ intrinsic sử dụng tỷ lệ đó, nếu không hộp không có tỷ lệ ưa thích. Các tính toán kích thước liên quan đến tỷ lệ intrinsic luôn làm việc với kích thước hộp nội dung.

<ratio>

Tỷ lệ ưa thích của hộp là tỷ lệ được chỉ định của width / height. Nếu height và ký tự dấu gạch chéo trước nó bị bỏ qua, height mặc định là 1. Các tính toán kích thước liên quan đến tỷ lệ ưa thích làm việc với kích thước của hộp được chỉ định bởi box-sizing.

auto && <ratio>

Khi cả auto và <ratio> được chỉ định cùng nhau, auto được sử dụng nếu phần tử là replaced element có tỷ lệ tự nhiên, như phần tử <img>. Nếu không, tỷ lệ được chỉ định của width / height được sử dụng làm tỷ lệ ưa thích.

Định nghĩa chính thức

Cú pháp chính thức

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Ví dụ

Khám phá hiệu ứng aspect-ratio với chiều rộng cố định

Trong ví dụ này, chiều rộng của các phần tử <div> được đặt thành 100px và chiều cao là auto. Vì giá trị chiều rộng cố định ở đây, thuộc tính aspect-ratio chỉ ảnh hưởng đến chiều cao của các phần tử <div> để duy trì tỷ lệ chiều rộng trên chiều cao được chỉ định.

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>

div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

Dự phòng về tỷ lệ tự nhiên

Trong ví dụ này, chúng ta dùng hai phần tử <img>. Phần tử đầu tiên không có thuộc tính src được đặt thành file hình ảnh.

<img src="" /> <img src="plumeria.jpg" />

Code sau đây đặt 3/2 là tỷ lệ ưa thích và auto là dự phòng.

img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

Lưu ý hình ảnh đầu tiên không có nội dung thay thế vẫn giữ tỷ lệ 3/2, trong khi hình ảnh thứ hai sau khi nội dung được tải sử dụng tỷ lệ tự nhiên của hình ảnh.

Đặc tả

Khả năng tương thích trình duyệt

Xem thêm

• Understanding aspect ratios
• Image aspect-ratio: preventing jank
• Designing an aspect ratio unit for CSS
• Setting Height And Width On Images Is Important Again