Thuộc tính CSS mới giúp duy trì khoảng cách trong bố cục thích ứng.
Tỷ lệ khung hình
Tỷ lệ khung hình thường được biểu thị bằng 2 số nguyên và một dấu hai chấm trong kích thước: chiều rộng:chiều cao hoặc x:y. Tỷ lệ khung hình phổ biến nhất khi chụp ảnh là 4:3 và 3:2, trong khi video và các máy ảnh mới hơn thường có tỷ lệ khung hình 16:9.
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 các kích thước hình ảnh khác nhau và kích thước phần tử thay đổi dựa trên không gian có sẵn.
Sau đây là một số ví dụ về trường hợp cần duy trì tỷ lệ khung hình:
- Tạo iframe thích ứng, trong đó các iframe này chiếm 100% chiều rộng của thành phần mẹ và chiều cao vẫn phải duy trì ở một tỷ lệ khung nhìn cụ thể
- Tạo vùng chứa phần giữ chỗ 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 không gian
- Tạo không gian đồng nhất, thích ứng cho hình ảnh trực quan 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 thành phần như thẻ hoặc ngày theo lịch
- Tạo không gian thích ứng đồng nhất cho nhiều hình ảnh có kích thước khác nhau (có thể sử dụng cùng với
object-fit)
Vừa với đối tượng
Việc xác định tỷ lệ khung hình sẽ giúp chúng ta định 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 này 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 đó:
object-fit. Xem bản minh hoạ trên Codepen.Các giá trị initial và fill đ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 bị méo và mờ khi điều chỉnh lại các pixel. Không lý tưởng. object-fit: cover 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 dựa trên kích thước này. Nó "Phóng to" ở ranh giới thấp nhất. object-fit: contain đảm bảo rằng toàn bộ hình ảnh luôn hiển thị và ngược lại với cover, trong đó biểu tượng lấy kích thước của ranh giới lớn nhất (trong ví dụ của chúng tôi 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 trong khi vẫn phù hợp với không gian. Trường hợp object-fit: none cho thấy hình ảnh bị cắt ở chính giữa (vị trí mặc định của đối tượng) với kích thước tự nhiên.
object-fit: cover có xu hướng hoạt động trong hầu hết trường hợp để đảm bảo giao diện đồng nhất và đẹp mắt khi xử lý hình ảnh ở nhiều kích thước. Tuy nhiên, bạn sẽ bị mất thông tin theo cách này (hình ảnh bị cắt ở cạnh dài nhất).
Nếu những thông tin này quan trọng (ví dụ: khi làm việc với nền phẳng của các sản phẩm làm đẹp), thì việc cắt nội dung quan trọng sẽ không được chấp nhận. Vì vậy, tốt nhất bạn nên sử dụng hình ảnh thích ứng có kích thước khác nhau sao cho phù hợp với không gian giao diện người dùng mà không bị cắt.
Mẹo cũ: duy trì tỷ lệ khung hình bằng padding-top
padding-top để đặ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.Để làm cho các mẫu này 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 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 một trục riêng lẻ (chiều cao hoặc chiều rộng).
Một giải pháp chạy trên nhiều trình duyệt hiện được chấp nhận rộng rãi để duy trì tỷ lệ khung hình dựa trên chiều rộng của hình ảnh được gọi là "Chèn đệm trên cùng". Giải pháp này đòi hỏi phải có một vùng chứa mẹ và một vùng chứa con được đặt tuyệt đối. Sau đó, ứng dụng sẽ tính tỷ lệ khung hình dưới dạng phần trăm để đặt thành 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ờ, sau 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 gốc. Hãy xem ví dụ sau đây:
<div class="container">
<img class="media" src="..." alt="...">
</div>
Sau đó, chúng tôi 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 bằng aspect-ratio
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 thêm một số chi phí và vị trí. Với thuộc tính CSS aspect-ratio nội tại mới, ngôn ngữ để duy trì tỷ lệ khung hình 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, đặt aspect-ratio thành tỷ lệ đã chỉ định là width / height.
.container {
width: 100%;
padding-top: 56.25%;
}
.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 đại tu thuộc tính khoảng đệm để thực hiện việc gì đó bên ngoài phạm vi thông thường.
Thuộc tính mới này cũng bổ sung khả năng đặt 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 tỷ lệ khung hình đó; nếu không thì hộp không có tỷ lệ khung hình ưu tiên". Nếu cả auto và <ratio> được chỉ định cùng nhau, thì tỷ lệ khung hình ưu tiên sẽ là tỷ lệ được chỉ định của width chia cho height trừ phi đó là phần tử được thay thế với tỷ lệ khung hình nội tại. Trong trường hợp đó, hệ thống sẽ sử dụng tỷ lệ khung hình đó.
Ví dụ: nhất quán trong một lưới
Tính năng này cũng hoạt động hiệu quả với cơ chế bố cục CSS như CSS Grid và Flexbox. Hãy xem xét một danh sách có phần tử con mà bạn muốn duy trì tỷ lệ khung hình 1:1, chẳng hạn như lưới các 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;
}
Ví dụ: ngăn tình trạng xáo trộn bố cục
Một tính năng tuyệt vời khác của aspect-ratio là có thể tạo không gian giữ chỗ để ngăn Điểm số tổng hợp về mức thay đổi bố cục và cung cấp Các chỉ số quan trọng về trang web tốt hơn. Trong ví dụ đầu tiên
này, việc tải một thành phần từ một API, chẳng hạn như Unsplash sẽ tạo ra một sự thay đổi bố cục khi nội dung nghe nhìn tải xong.
Mặt khác, việc sử dụng aspect-ratio sẽ tạo một phần giữ chỗ để ngăn sự thay đổi bố cục này:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Mẹo hay: 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 hình ảnh là thông qua thuộc tính hình ảnh. Nếu biết trước kích thước của hình ảnh, bạn nên đặt các kích thước này làm width và height.
Trong ví dụ của chúng ta ở trên, nếu biết kích thước là 800px x 600px, phần đánh dấu hình ảnh sẽ trông giống như sau: <img src="image.jpg"
alt="..." width="800" height="600">. Nếu hình ảnh được gửi có cùng tỷ lệ khung hình nhưng không nhất thiết phải là các giá trị pixel chính xác đó, chúng ta vẫn có thể sử dụng các giá trị thuộc tính hình ảnh để đặt 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ả cùng nhau sẽ có dạng như sau:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Sau cùng, hiệu ứng cũng giống như việc đặt aspect-ratio trên hình ảnh thông qua CSS và tránh thay đổi bố cục tích luỹ (xem bản minh hoạ trên Codepen).
Kết luận
Với thuộc tính CSS aspect-ratio mới, chạy trên nhiều trình duyệt hiện đại, việc duy trì tỷ lệ khung hình phù hợp trong vùng chứa nội dung nghe nhìn và 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.