> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/aspect-ratio-phan-30.md).

# aspect-ratio  (Phần 30)

#### 1. Có hẳn thuộc tính CSS `aspect-ratio` <a href="#id-1-co-han-thuoc-tinh-css-aspect-ratio-0" id="id-1-co-han-thuoc-tinh-css-aspect-ratio-0"></a>

Từ trước đến giờ mỗi lần muốn [tạo 1 khối (hình ảnh/video) theo 1 tỷ lệ 16:9, 4:3, 3:2](https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-1-3Q75wppeKWb#_2-image-background-responsive-1) mình thường làm `Aspect Ratio` bằng cách sử dụng `padding-top`. Ví dụ:

* Tỉ lệ 1:1 -> `padding-top: 100%`
* Tỉ lệ 4:3 -> `padding-top: 75%`
* Tỉ lệ 3:2 -> `padding-top: 66.67%`
* Tỉ lệ 16:9 -> `padding-top: 56.25%`
* Hoặc 1 tỉ lệ bất kỳ, mà giúp cho cái box đó có khả năng responsive -> `padding-top: (height_image/width_image) * 100%` (Giống như cách làm responsive cho video ở [Phần 1 của series này](https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-1-3Q75wppeKWb#_2-image-background-responsive-1))

Và [đầu năm 2021 Chrome 88 đã mang lại cho chúng ta 1 thuộc tính mới là `aspect-ratio`](https://www.chromestatus.com/feature/5738050678161408). Ví dụ với tỉ lệ 16:9, bạn chỉ cần viết CSS `aspect-ratio: 16 / 9`.

```
<div>My name is 16x9</div>
div {
  background: lime;
  width: 100%;
  // aspect-ratio: 16 / 9;
}
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2F6axL0jGHzfXRogt1CUQe%2Fimage.png?alt=media&amp;token=e6d05591-e2ea-4a0e-af51-6132f4a396f4" alt=""><figcaption></figcaption></figure>

```
<div>My name is 16x9</div>
div {
  background: lime;
  width: 100%;
  aspect-ratio: 16 / 9;
}
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2F4r4wNMhQ7AAu8RwppEK2%2Fimage.png?alt=media&amp;token=0ea50ec3-66b1-4faa-8de4-e1c88d371664" alt=""><figcaption></figcaption></figure>

Thử luôn demo với `iframe`

```
<iframe src="https://www.youtube.com/embed/0Gr1XSyxZy0">

iframe {
   width: 75%;
   // aspect-ratio: 16/9;
}
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FmlIsHzTgvAXmKypMouU0%2Fimage.png?alt=media&amp;token=d849c2db-2fdf-4289-a67c-41003723d407" alt=""><figcaption></figcaption></figure>

```
<iframe src="https://www.youtube.com/embed/0Gr1XSyxZy0">
iframe {
   width: 75%;
   aspect-ratio: 16/9;
}
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FmCUO2SKZp5PkFU0mFchE%2Fimage.png?alt=media&amp;token=15067d72-8420-4658-8140-82b6e4ce94bf" alt=""><figcaption></figcaption></figure>