CSS Aspect-Ratio: Tạo Tỷ Lệ Khung Hình Hoàn Hảo Cho Website

CSS Aspect-Ratio là gì?

CSS aspect-ratio là thuộc tính cho phép bạn thiết lập tỷ lệ khung hình (width/height ratio) cố định cho các phần tử HTML. Thuộc tính này giúp duy trì tỷ lệ khung hình nhất quán, đặc biệt hữu ích trong responsive design và khi làm việc với hình ảnh, video hoặc container.

Tại sao Aspect-Ratio quan trọng?

Responsive Design: Đảm bảo tỷ lệ khung hình nhất quán trên mọi thiết bị
Performance: Giảm layout shift khi tải nội dung
User Experience: Tạo giao diện đồng nhất và chuyên nghiệp
Maintenance: Code dễ bảo trì hơn so với các giải pháp hack trước đây

Cú pháp và Giá trị

Cú pháp cơ bản

.element {
  aspect-ratio: width / height;
}

Các giá trị được hỗ trợ

Giá trị	Mô tả	CSS	Tailwind CSS
`auto`	Giá trị mặc định, tỷ lệ tự nhiên	`aspect-ratio: auto;`	`aspect-auto`
`number`	Tỷ lệ đơn giản	`aspect-ratio: 1;` (hình vuông)	`aspect-square`
`width / height`	Tỷ lệ cụ thể	`aspect-ratio: 16/9;`	`aspect-video`
`inherit`	Kế thừa từ element cha	`aspect-ratio: inherit;`	`aspect-inherit`
`initial`	Giá trị khởi tạo	`aspect-ratio: initial;`	`aspect-initial`
`unset`	Hủy bỏ giá trị đã set	`aspect-ratio: unset;`	`aspect-unset`

Các Tỷ Lệ Phổ Biến

1. Tỷ lệ hình vuông (1:1)

.square {
  aspect-ratio: 1 / 1;
  /* hoặc */
  aspect-ratio: 1;
}

Tailwind CSS:

<div class="aspect-square">...</div>

2. Tỷ lệ video widescreen (16:9)

.video-container {
  aspect-ratio: 16 / 9;
}

Tailwind CSS:

<div class="aspect-video">...</div>

3. Tỷ lệ ảnh portrait (3:4)

.portrait-image {
  aspect-ratio: 3 / 4;
}

Tailwind CSS:

<div class="aspect-[3/4]">...</div>

4. Tỷ lệ golden ratio (1.618:1)

.golden-ratio {
  aspect-ratio: 1.618;
}

Tailwind CSS:

<div class="aspect-[1.618]">...</div>

5. Các tỷ lệ phổ biến khác

Tỷ lệ	CSS	Tailwind CSS	Mô tả
4:3	`aspect-ratio: 4/3;`	`aspect-[4/3]`	Tỷ lệ màn hình cổ điển
21:9	`aspect-ratio: 21/9;`	`aspect-[21/9]`	Ultra-wide monitor
2:1	`aspect-ratio: 2/1;`	`aspect-[2/1]`	Banner rộng
5:4	`aspect-ratio: 5/4;`	`aspect-[5/4]`	Màn hình vuông
1:2	`aspect-ratio: 1/2;`	`aspect-[1/2]`	Portrait dọc

Ví Dụ Thực Tế

Ví dụ 1: Container hình vuông responsive

<div class="square-container">
  <div class="content">
    <h3>Nội dung hình vuông</h3>
    <p>Container này luôn giữ tỷ lệ 1:1</p>
  </div>
</div>

.square-container {
  aspect-ratio: 1;
  width: 100%;
  max-width: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  overflow: hidden;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: white;
  text-align: center;
}

Phiên bản Tailwind CSS:

<div class="aspect-square w-full max-w-xs bg-gradient-to-br from-blue-400 to-purple-600 rounded-xl overflow-hidden">
  <div class="w-full h-full flex flex-col justify-center items-center p-5 text-white text-center">
    <h3 class="text-lg font-semibold mb-2">Nội dung hình vuông</h3>
    <p class="text-sm">Container này luôn giữ tỷ lệ 1:1</p>
  </div>
</div>

Ví dụ 2: Video responsive với tỷ lệ 16:9

<div class="video-wrapper">
  <iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video"
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Phiên bản Tailwind CSS:

<div class="aspect-video w-full relative bg-black rounded-lg overflow-hidden">
  <iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video"
    class="absolute inset-0 w-full h-full border-0"
    allowfullscreen>
  </iframe>
</div>

Ví dụ 3: Gallery với các tỷ lệ khác nhau

<div class="gallery">
  <div class="gallery-item landscape">
    <img src="landscape.jpg" alt="Landscape">
  </div>
  <div class="gallery-item portrait">
    <img src="portrait.jpg" alt="Portrait">
  </div>
  <div class="gallery-item square">
    <img src="square.jpg" alt="Square">
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.landscape {
  aspect-ratio: 4 / 3;
}

.portrait {
  aspect-ratio: 3 / 4;
}

.square {
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

Phiên bản Tailwind CSS:

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4 p-5">
  <div class="aspect-[4/3] relative overflow-hidden rounded-lg shadow-md group">
    <img src="landscape.jpg" alt="Landscape" 
         class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
  </div>
  <div class="aspect-[3/4] relative overflow-hidden rounded-lg shadow-md group">
    <img src="portrait.jpg" alt="Portrait" 
         class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
  </div>
  <div class="aspect-square relative overflow-hidden rounded-lg shadow-md group">
    <img src="square.jpg" alt="Square" 
         class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
  </div>
</div>

Ví dụ 4: Card component với aspect-ratio

<div class="card">
  <div class="card-image">
    <img src="card-image.jpg" alt="Card Image">
  </div>
  <div class="card-content">
    <h3>Tiêu đề card</h3>
    <p>Mô tả ngắn gọn về nội dung card này.</p>
    <button class="btn">Xem thêm</button>
  </div>
</div>

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  margin: 0 0 12px 0;
  font-size: 1.2em;
  color: #333;
}

.card-content p {
  margin: 0 0 16px 0;
  color: #666;
  line-height: 1.5;
}

.btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #0056b3;
}

Phiên bản Tailwind CSS:

<div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl">
  <div class="aspect-[5/3] overflow-hidden">
    <img src="card-image.jpg" alt="Card Image" 
         class="w-full h-full object-cover">
  </div>
  <div class="p-5">
    <h3 class="text-xl font-semibold text-gray-800 mb-3">Tiêu đề card</h3>
    <p class="text-gray-600 leading-relaxed mb-4">Mô tả ngắn gọn về nội dung card này.</p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded-md transition-colors duration-200 hover:bg-blue-600">
      Xem thêm
    </button>
  </div>
</div>

Kết Hợp với Tailwind CSS

Tailwind CSS cung cấp nhiều utility class cho aspect-ratio, giúp bạn áp dụng dễ dàng:

Aspect-ratio utilities có sẵn:

<!-- Hình vuông (1:1) -->
<div class="aspect-square bg-blue-500"></div>

<!-- Tỷ lệ video (16:9) -->
<div class="aspect-video bg-red-500"></div>

<!-- Tỷ lệ tự động -->
<div class="aspect-auto bg-yellow-500"></div>

Custom aspect-ratio với arbitrary values:

<!-- Tỷ lệ 4:3 -->
<div class="aspect-[4/3] bg-green-500"></div>

<!-- Tỷ lệ 3:2 -->
<div class="aspect-[3/2] bg-purple-500"></div>

<!-- Tỷ lệ 21:9 (ultra-wide) -->
<div class="aspect-[21/9] bg-indigo-500"></div>

Bảng so sánh CSS vs Tailwind:

CSS	Tailwind CSS	Tỷ lệ
`aspect-ratio: 1;`	`aspect-square`	1:1
`aspect-ratio: 16/9;`	`aspect-video`	16:9
`aspect-ratio: auto;`	`aspect-auto`	Tự động
`aspect-ratio: 4/3;`	`aspect-[4/3]`	4:3
`aspect-ratio: 3/2;`	`aspect-[3/2]`	3:2
`aspect-ratio: 2/1;`	`aspect-[2/1]`	2:1

Browser Support và Fallback

Browser Support

Chrome: 88+
Firefox: 89+
Safari: 15+
Edge: 88+

Fallback cho trình duyệt cũ

.aspect-ratio-fallback {
  /* Fallback cho trình duyệt cũ */
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

.aspect-ratio-fallback > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern browsers */
@supports (aspect-ratio: 1) {
  .aspect-ratio-fallback {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
  
  .aspect-ratio-fallback > * {
    position: static;
  }
}

Best Practices

1. Kết hợp với object-fit cho images

.image-container {
  aspect-ratio: 1;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* hoặc contain, fill */
}

2. Sử dụng với CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.grid-item {
  aspect-ratio: 1;
}

3. Responsive aspect-ratio

.responsive-aspect {
  aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
  .responsive-aspect {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .responsive-aspect {
    aspect-ratio: 1;
  }
}

Phiên bản Tailwind CSS:

<div class="aspect-video md:aspect-[4/3] sm:aspect-square">
  <!-- Nội dung responsive -->
</div>

4. Kết hợp với CSS custom properties

:root {
  --card-aspect: 3 / 2;
  --hero-aspect: 21 / 9;
}

.card {
  aspe

CSS Aspect-Ratio: Tạo Tỷ Lệ Khung Hình Hoàn Hảo Cho Website

CSS Aspect-Ratio là gì?

Tại sao Aspect-Ratio quan trọng?

Cú pháp và Giá trị

Cú pháp cơ bản

Các giá trị được hỗ trợ

Các Tỷ Lệ Phổ Biến

1. Tỷ lệ hình vuông (1:1)

2. Tỷ lệ video widescreen (16:9)

3. Tỷ lệ ảnh portrait (3:4)

4. Tỷ lệ golden ratio (1.618:1)

5. Các tỷ lệ phổ biến khác

Ví Dụ Thực Tế

Ví dụ 1: Container hình vuông responsive

Ví dụ 2: Video responsive với tỷ lệ 16:9

Ví dụ 3: Gallery với các tỷ lệ khác nhau

Ví dụ 4: Card component với aspect-ratio

Kết Hợp với Tailwind CSS

Aspect-ratio utilities có sẵn:

Custom aspect-ratio với arbitrary values:

Bảng so sánh CSS vs Tailwind:

Browser Support và Fallback

Browser Support

Fallback cho trình duyệt cũ

Best Practices

1. Kết hợp với object-fit cho images

2. Sử dụng với CSS Grid

3. Responsive aspect-ratio

4. Kết hợp với CSS custom properties

`Mục lục`

Modern BDD Test Automation with Playwright, Typescript

AWS Cloud Mastery