Thuộc tính CSS có tỷ lệ khung hình mới được hỗ trợ trong Chromium, Bản xem trước công nghệ của Safari và Firefox Nightly

Thuộc tính CSS mới giúp duy trì khoảng trống trong bố cục thích ứng.

Una Kravets

Tỷ lệ khung hình

Hỗ trợ trình duyệt

  • Chrome: 88.
  • Cạnh: 88.
  • Firefox: 89.
  • Safari: 15.

Nguồn

Tỷ lệ khung hình thường được biểu thị dưới dạng hai số nguyên và một dấu hai chấm theo các kích thước: chiều rộng:chiều cao hoặc x:y. Các tỷ lệ khung hình phổ biến nhất để chụp ảnh là 4:3 và 3:2, trong khi video, và các máy ảnh dành cho người tiêu dùng gần đây thường có tỷ lệ khung hình 16:9.

Hai hình ảnh có cùng tỷ lệ khung hình. Một kích thước 634 x 951 px và kích thước còn lại là 200 x 300 px. Cả hai đều có tỷ lệ khung hình 2:3.
2 hình ảnh có cùng tỷ lệ khung hình. Một kích thước 634 x 951 px và kích thước còn lại là 200 x 300 px. Cả hai đều có tỷ lệ khung hình 2:3.

Với sự ra đời của thiết kế thích ứng, việc duy trì tỷ lệ khung hình ngày càng quan trọng đối với các nhà phát triển web, đặc biệt là khi kích thước hình ảnh khác nhau và kích thước phần tử thay đổi dựa theo .

Sau đây là một số ví dụ về vai trò quan trọng của việc duy trì tỷ lệ khung hình:

  • Tạo iframe thích ứng, trong đó chiều rộng sẽ bằng 100% chiều rộng của thành phần mẹ và giữ nguyên chiều cao tỷ lệ khung nhìn cụ thể
  • Tạo vùng chứa phần giữ chỗ hàm nội tại cho hình ảnh, video và nội dung nhúng để ngăn việc bố cục lại khi các mục tải và chiếm dung lượng
  • Tạo không gian đồng nhất, thích ứng để trực quan hoá dữ liệu tương tác hoặc ảnh động SVG
  • Tạo không gian thích ứng, đồng nhất cho các thành phần nhiều phần tử, chẳng hạn như thẻ hoặc ngày theo lịch
  • Tạo không gian đồng nhất, thích ứng cho nhiều hình ảnh có kích thước khác nhau (có thể sử dụng cùng với nhau object-fit)

Vừa với đối tượng

Việc xác định tỷ lệ khung hình giúp chúng ta định kích thước nội dung nghe nhìn trong ngữ cảnh thích ứng. Một công cụ khác trong bộ chứa là thuộc tính object-fit, cho phép người dùng mô tả cách một đối tượng (chẳng hạn như hình ảnh) trong một khối sẽ lấp đầy khối đó:

Hình ảnh minh hoạ phù hợp với đối tượng
Hiển thị nhiều giá trị object-fit. Xem bản minh hoạ trên Codepen.

Các giá trị initial và fill sẽ điều chỉnh lại hình ảnh để lấp đầy không gian. Trong ví dụ của chúng tôi, điều này khiến hình ảnh được làm nhỏ và mờ, vì nó điều chỉnh lại các pixel. Không lý tưởng. object-fit: cover lần sử dụng kích thước nhỏ nhất của hình ảnh để lấp đầy không gian và cắt hình ảnh cho vừa với hình ảnh dựa trên kích thước này . Tính năng "Phóng to" ở ranh giới thấp nhất của nó. object-fit: contain đảm bảo rằng toàn bộ hình ảnh luôn hiển thị và do đó ngược lại với cover, trong đó mã này lấy kích thước của ranh giới lớn nhất (trong ví dụ ở trên, đây là chiều rộng) và đổi kích thước hình ảnh để duy trì tỷ lệ khung hình nội tại vừa có thể vừa với không gian vừa đủ. Hộp đựng object-fit: none cho thấy hình ảnh bị cắt ở chính giữa (vị trí đối tượng mặc định) ở kích thước tự nhiên.

object-fit: cover có xu hướng hoạt động trong hầu hết các tình huống để đảm bảo giao diện đồng nhất đẹp mắt khi xử lý với hình ảnh có kích thước khác nhau, tuy nhiên, bạn sẽ mất thông tin theo cách này (hình ảnh được cắt ở cạnh dài nhất).

Nếu những chi tiết này quan trọng (ví dụ: khi làm việc với một lớp phẳng gồm các sản phẩm làm đẹp), không chấp nhận việc cắt xén nội dung quan trọng. Vì vậy, hình ảnh thích ứng của kích thước khác nhau cho phù hợp với không gian giao diện người dùng mà không bị cắt.

Tấn công cũ: duy trì tỷ lệ khung hình bằng padding-top

Sử dụng khoảng đệm trên cùng để thiết lập tỷ lệ khung hình 1:1 cho hình ảnh xem trước bài đăng trong băng chuyền.
Sử dụng padding-top để thiết lập tỷ lệ khung hình 1:1 cho hình ảnh xem trước của bài đăng trong một băng chuyền.

Để phản hồi nhanh hơn, chúng ta có thể sử dụng tỷ lệ khung hình. Điều này cho phép chúng ta đặt ra kích thước tỷ lệ cụ thể và đặt phần còn lại của nội dung nghe nhìn trên từng trục riêng (chiều cao hoặc chiều rộng).

Giải pháp hiện được chấp nhận trên nhiều trình duyệt để duy trì tỷ lệ khung hình dựa trên hình ảnh chiều rộng này được gọi là "Tấn công khoảng đệm trên cùng". Giải pháp này yêu cầu vùng chứa mẹ và vùng chứa con được đặt tuyệt đối. Sau đó, hệ thống sẽ tính tỷ lệ khung hình dưới dạng phần trăm để đặt làm padding-top. Ví dụ:

  • Tỷ lệ khung hình 1:1 = 1 / 1 = 1 = padding-top: 100%
  • Tỷ lệ khung hình 4:3 = 3 / 4 = 0,75 = padding-top: 75%
  • Tỷ lệ khung hình 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
  • Tỷ lệ khung hình 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Bây giờ, khi đã xác định được giá trị tỷ lệ khung hình, chúng ta có thể áp dụng giá trị đó cho vùng chứa mẹ. Hãy xem ví dụ sau đây:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Sau đó, chúng ta có thể viết CSS sau:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Duy trì tỷ lệ khung hình khi dùng aspect-ratio

Sử dụng tỷ lệ khung hình để thiết lập tỷ lệ khung hình 1:1 cho hình ảnh xem trước trong một băng chuyền.
Sử dụng aspect-ratio để đặt tỷ lệ khung hình 1:1 cho hình ảnh xem trước bài đăng trong một băng chuyền.

Thật không may, việc tính toán các giá trị padding-top này không trực quan lắm và đòi hỏi một số mức hao tổn và vị trí bổ sung. Với CSS aspect-ratio có sẵn nội tại mới thuộc tính, là ngôn ngữ để duy trì khía cạnh thì các tỷ lệ này rõ ràng hơn nhiều.

Với cùng một mã đánh dấu, chúng ta có thể thay thế: padding-top: 56.25% bằng aspect-ratio: 16 / 9, thiết lập aspect-ratio so với tỷ lệ đã chỉ định là width / height.

Sử dụng khoảng đệm trên cùng
.container {
  width: 100%;
  padding-top: 56.25%;
}
Sử dụng tỷ lệ khung hình
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Việc sử dụng aspect-ratio thay vì padding-top sẽ rõ ràng hơn nhiều và không thay đổi khoảng đệm làm một việc ngoài phạm vi thông thường.

Thuộc tính mới này cũng bổ sung khả năng thiết lập tỷ lệ khung hình thành auto, trong đó "các phần tử được thay thế bằng tỷ lệ khung hình nội tại sẽ sử dụng khung hình đó tỷ số; nếu không hộp không có tỷ lệ khung hình ưu tiên". Nếu cả auto và <ratio> đều là được chỉ định cùng nhau, thì tỷ lệ khung hình ưu tiên là tỷ lệ được chỉ định là width chia cho height trừ phi đó là một phần tử được thay thế bằng tỷ lệ khung hình nội tại, trong trường hợp đó, tỷ lệ khung hình đó sẽ được sử dụng.

Ví dụ: tính nhất quán trong một lưới

Điều này cũng hoạt động rất tốt với các cơ chế bố cục CSS như CSS Grid và Flexbox. Cân nhắc một danh sách với các thành phần con mà bạn muốn duy trì tỷ lệ khung hình 1:1, chẳng hạn như lưới biểu tượng nhà tài trợ:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}
Hình ảnh ở dạng lưới có phần tử mẹ ở nhiều kích thước tỷ lệ khung hình. Xem bản minh hoạ trên Codepen.

Ví dụ: ngăn việc thay đổi bố cục

Một tính năng hay khác của aspect-ratio là nó có thể tạo không gian giữ chỗ để ngăn Điểm số thay đổi bố cục tích luỹ và cung cấp Chỉ số quan trọng về trang web tốt hơn. Trong phần đầu tiên này Ví dụ: việc tải một thành phần từ một API (chẳng hạn như Unsplash) sẽ tạo ra thay đổi bố cục khi nội dung nghe nhìn tải xong.

Video về sự thay đổi bố cục tích luỹ, xảy ra khi không có tỷ lệ khung hình nào được đặt cho một thành phần đã tải. Video này được quay bằng mạng 3G được mô phỏng.

Mặt khác, việc sử dụng aspect-ratio sẽ tạo một phần giữ chỗ để ngăn việc dịch chuyển bố cục này:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}
Video có tỷ lệ khung hình đã đặt được đặt trên một thành phần đã tải. Video này được quay bằng mạng 3G được mô phỏng. Xem bản minh hoạ trên Codepen.

Mẹo thêm: các thuộc tính hình ảnh cho tỷ lệ khung hình

Một cách khác để đặt tỷ lệ khung hình của một hình ảnh là thông qua thuộc tính hình ảnh. Nếu bạn biết trước kích thước của hình ảnh thì phương pháp hay nhất là hãy đặt các phương diện này làm width và height.

Trong ví dụ ở trên, khi biết kích thước là 800px x 600px, mã đánh dấu hình ảnh sẽ có dạng như sau: <img src="image.jpg" alt="..." width="800" height="600">. Nếu hình ảnh được gửi có cùng một khía cạnh giá trị pixel chính xác, nhưng không nhất thiết là các giá trị pixel chính xác đó, chúng tôi vẫn có thể sử dụng hình ảnh các giá trị thuộc tính để thiết lập tỷ lệ, kết hợp với kiểu width: 100% để hình ảnh chiếm không gian thích hợp. Tất cả đều có dạng như sau:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

Cuối cùng, hiệu quả cũng giống như việc đặt aspect-ratio trên hình ảnh thông qua CSS và tránh được sự thay đổi bố cục tích luỹ (xem bản minh hoạ trên Viết mã).

Kết luận

Với thuộc tính CSS aspect-ratio mới, được khởi chạy trên nhiều trình duyệt hiện đại, duy trì trong vùng chứa nội dung nghe nhìn và vùng chứa bố cục sẽ trở nên đơn giản hơn một chút.

Ảnh của Amy Shamblen và Lionel Gustave qua Unsplash.