Hướng dẫn xây dựng tỷ lệ khung hình responsive

Rate this post

Với các thiết bị device phổ biến như ngày nay, việc các chuẩn khung hình Full HD (16×9) hay cao hơn ngày càng được quan tâm. Rõ ràng việc bạn để 1 bức ảnh méo hoặc video kém cân đối là điều không chuyên nghiệp chút nào.

Code Tốt sẽ chia sẻ cách xây dựng khung hình cố định theo aspect ratio sử dụng CSS (còn gọi là xây dựng tỷ lệ cố định khung hình), giúp video, image và các khung block hiển thị tốt trên các thiết bị devices khác nhau.

Aspect Ratio là gì?

Đầu tiên, các bạn cần nắm được aspect ratio là gì? Nó là tỷ lệ giữa chiều dài và chiều rộng của 1 khung hình.

Chẳng hạn, tỷ lệ của width và height để tạo ra khung vuông là 100%, tức 1/1.

Còn tỷ lệ của 1 khung hình chữ nhật thời chưa có HD thường là 75%, tức 3/4.

Cách thức xây dựng Aspect Ratio trong CSS

Về nguyên lý, ta có 1 cách có thể mô phỏng aspect ratio trong CSS, đó là tạo 1 block giả nằm bên trong element cần aspect ratio.

Case 1: Block trống với khung vuông

Cách thức thường là set 1 block như sau:

.box {
  width: 100%; /* required, vì cần bám width thì height mới hiện ra */
  padding-top: 100%;
}

Trong trường hợp ở trên .box không chứa bất kỳ nội dung nào bên trong.

Case 2: Block hình chữ nhât khổ 16/9

Cũng tương tự, nhưng ta sẽ thay đổi thuộc tính padding-top theo công thức lấy height/width * 100% được giá trị là 56.25% (= 9/16 * 100%).

.box {
  padding-top: 56.25%;
}

Case 3: Block hình chữ nhật nhưng chứa text bên trong

Khung hình này thường thấy rất nhiều trên các site e-commerce, mục tiêu là khi hover vào 1 bức ảnh nền thì hiện ra text bên trong chẳng hạn.

Để chữ nằm bên trong, ta cần nghĩ tới việc set relative cho block ratio và sử dụng absolute cho block text bên trong:

Markup HTML::

<div class="box">
  <div class="box__inner">
    <span class="box__text">View more</span>
  </div>
</div>

Còn đây là CSS:

.box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.box__inner {
  /* Các thuộc tính sau giúp inner bám mép của khung .box */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Các thuộc tính sau giúp cân giữa block text bên trong, nếu có */
  display: flex;
  align-items: center;
  justify-content: center;
}

Xem Codepen mẫu

Các bạn hãy thử với các khung hình phổ biến xem sao nhé.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...