Bootstrap - Tính năng Object Fit: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của thuộc tính object-fit trong Bootstrap. Như một người giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn qua chủ đề này từng bước một. Cuối bài hướng dẫn này, bạn sẽ biết cách đặt đối tượng như một chuyên gia!

什么是 Object Fit?

Trước khi chúng ta đi sâu vào các chi tiết cụ thể của Bootstrap, hãy cùng hiểu về object-fit là gì. Hãy tưởng tượng bạn đang cố gắng đặt một bức ảnh lớn, hình chữ nhật vào một khung hình vuông nhỏ. Bạn có một số lựa chọn:

1. Kéo giãn ảnh (nhưng nó có thể bị méo mó)
2. Cắt bỏ một phần của ảnh
3. Thu nhỏ ảnh, để lại khoảng trống xung quanh

Object-fit giống như một khung ảnh ma thuật có thể thực hiện tất cả những điều này và hơn thế nữa!

Bootstrap và Object Fit

Bootstrap, khung công tác front-end thân thiện của chúng ta, cung cấp các lớp để dễ dàng áp dụng thuộc tính object-fit vào ảnh và video của chúng ta. Hãy cùng khám phá các lớp này và xem chúng trong hành động!

Các Lớp Cơ Bản

Bootstrap cung cấp năm lớp object-fit:

Lớp	Mô tả
.object-fit-contain	Đặt toàn bộ đối tượng trong容器 trong khi duy trì tỷ lệ khung hình
.object-fit-cover	Che kín toàn bộ容器, có thể cắt bỏ một phần đối tượng
.object-fit-fill	Kéo giãn đối tượng để.fill容器, có thể làm méo mó
.object-fit-scale	Đổi mới đối tượng lớn nhất có thể mà không cắt bỏ hoặc kéo giãn
.object-fit-none	Không chú ý đến kích thước của容器, sử dụng kích thước gốc của đối tượng

Hãy cùng xem chúng trong hành động với một số ví dụ!

Ví dụ 1: Object Fit Contain

<img src="wide-landscape.jpg" class="object-fit-contain border rounded" alt="Cảnh quan">

Trong ví dụ này, chúng ta đang sử dụng .object-fit-contain trên một ảnh cảnh quan rộng. Ảnh sẽ đặt toàn bộ trong容器, duy trì tỷ lệ khung hình. Nếu容器 cao hơn ảnh, bạn sẽ thấy một khoảng trống ở trên và dưới ảnh.

Ví dụ 2: Object Fit Cover

<img src="tall-portrait.jpg" class="object-fit-cover border rounded" style="width: 200px; height: 200px;" alt="Chân dung">

Ở đây, chúng ta đang sử dụng .object-fit-cover trên một ảnh chân dung cao, ép nó vào một container vuông. Ảnh sẽ.fill toàn bộ container, nhưng một phần của nó có thể bị cắt bỏ từ trên và dưới.

Ví dụ 3: Object Fit Fill

<img src="square-logo.jpg" class="object-fit-fill border rounded" style="width: 300px; height: 150px;" alt="Logo">

Với .object-fit-fill, logo vuông của chúng ta đang bị kéo giãn để.fill container hình chữ nhật. Nó có thể trông hơi méo mó, nhưng sẽ.fill toàn bộ không gian.

Object Fit T响应式

Bây giờ, hãy nói về việc làm cho các thuộc tính object-fit của chúng ta trở nên响应式. Bootstrap cho phép chúng ta áp dụng các lớp object-fit khác nhau ở các kích thước màn hình khác nhau. Điều này rất hữu ích cho việc tạo các bố cục trông đẹp trên cả điện thoại di động và máy tính để bàn!

Các Lớp T响应式

Bootstrap cung cấp các biến thể响应 của các lớp object-fit:

Lớp	Mô tả
.object-fit-sm-*	Áp dụng từ breakpoint nhỏ và lên
.object-fit-md-*	Áp dụng từ breakpoint trung bình và lên
.object-fit-lg-*	Áp dụng từ breakpoint lớn và lên
.object-fit-xl-*	Áp dụng từ breakpoint rất lớn và lên
.object-fit-xxl-*	Áp dụng từ breakpoint rất rất lớn và lên

Ví dụ 4: Object Fit T响应式

<img src="versatile-image.jpg" class="object-fit-cover object-fit-sm-contain object-fit-md-fill border rounded" alt="Ảnh linh hoạt">

Trong ví dụ này, ảnh của chúng ta sẽ:

• Sử dụng cover trên màn hình rất nhỏ (điện thoại di động)
• Chuyển sang contain trên màn hình nhỏ (máy tính bảng)
• Sử dụng fill trên màn hình trung bình và lớn hơn (máy tính để bàn)

Điều này cho phép chúng ta tối ưu hóa cách hiển thị ảnh dựa trên kích thước màn hình. Thật tuyệt vời phải không?

Object Fit với Video

Object-fit không chỉ适用于图片 - nó hoạt động rất tốt với video! Hãy cùng xem chúng ta có thể sử dụng nó để làm nội dung video của mình trông tuyệt vời.

Ví dụ 5: Video với Object Fit

<video class="object-fit-contain w-100" autoplay loop muted>
<source src="cool-video.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Trong ví dụ này, chúng ta đang sử dụng .object-fit-contain để đảm bảo video của chúng ta fits trong container trong khi duy trì tỷ lệ khung hình. Lớp w-100 làm cho video chiếm 100% chiều rộng của container.

Ví dụ 6: Video Object Fit T响应式

<video class="object-fit-cover object-fit-md-contain w-100" style="height: 300px;" autoplay loop muted>
<source src="awesome-video.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Ở đây, chúng ta đang sử dụng sự kết hợp của .object-fit-cover và .object-fit-md-contain. Trên màn hình nhỏ hơn, video sẽ cover container (cắt bỏ một phần nội dung), nhưng trên màn hình trung bình và lớn hơn, nó sẽ chuyển sang contain mode, hiển thị toàn bộ video mà không bị cắt bỏ.

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã khám phá kỹ lưỡng các lớp object-fit của Bootstrap. Từ việc đặt ảnh cơ bản đến video响应式, bạn bây giờ đã có các công cụ để làm nội dung media của mình trông tuyệt vời trên mọi thiết bị.

Nhớ rằng, phát triển web là tất cả về thử nghiệm. Đừng ngại mix và match các lớp này để xem điều gì hoạt động tốt nhất cho dự án của bạn. Ai biết được? Bạn có thể phát hiện ra một sự kết hợp làm cho trang web của bạn trở thành chủ đề của cuộc trò chuyện!

Khi chúng ta kết thúc, tôi nhớ lại một học sinh曾经说过, "Object-fit giống như cố gắng mặc vào quần jean cũ sau kỳ nghỉ lễ - đôi khi bạn cần contain, đôi khi bạn cần cover, và đôi khi bạn chỉ cần fill!" Đúng vậy, người bạn trẻ, đúng vậy.

Tiếp tục thực hành, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ với phát triển web. Đến gặp lại, chúc các bạn mã code vui vẻ!

Credits: Image by storyset