ViệtTrong thiết kế web, hình ảnh đóng vai trò quan trọng, không chỉ làm đẹp giao diện mà còn giúp truyền tải thông tin hiệu quả. Bootstrap 5 cung cấp một loạt các class tiện ích (utility classes) để dễ dàng tối ưu hóa và định dạng hình ảnh, giúp chúng hiển thị nhất quán và đẹp mắt trên mọi thiết bị. Trong bài viết này, CodeTutHub sẽ giới thiệu các class Bootstrap 5 dành cho hình ảnh cùng các ví dụ cụ thể để bạn dễ dàng áp dụng.
1. Hình ảnh responsive (img-fluid)
Class img-fluid giúp hình ảnh tự động điều chỉnh kích thước theo kích thước của phần tử chứa, đảm bảo hình ảnh hiển thị tốt trên mọi kích thước màn hình mà không bị tràn hoặc biến dạng.
Ví dụ
<img src="https://codetuthub.com/example/image/800x400.jpg" class="img-fluid" alt="Responsive image">Trong ví dụ này, hình ảnh sẽ tự động thay đổi kích thước để phù hợp với kích thước màn hình và phần tử chứa. Khi bạn thu nhỏ hoặc phóng to màn hình, hình ảnh sẽ co giãn theo kích thước phần tử chứa mà không mất đi tỷ lệ ban đầu.
2. Hình ảnh bo tròn (rounded)
Bootstrap 5 cung cấp các class tiện ích rounded để giúp hình ảnh có các góc bo tròn, từ bo nhẹ đến bo tròn hoàn toàn.
Các class rounded trong Bootstrap 5
- rounded: Bo nhẹ các góc.
- rounded-top: Bo tròn chỉ ở hai góc trên.
- rounded-bottom: Bo tròn chỉ ở hai góc dưới.
- rounded-start: Bo tròn hai góc bên trái.
- rounded-end: Bo tròn hai góc bên phải.
- rounded-circle: Biến hình ảnh thành hình tròn.
- rounded-pill: Bo tròn thành hình oval.
Ví dụ
<img src="https://codetuthub.com/example/image/150x150.jpg" class="rounded" alt="Rounded image">
<img src="https://codetuthub.com/example/image/150x150.jpg" class="rounded-circle" alt="Circle image">
<img src="https://codetuthub.com/example/image/150x150.jpg" class="rounded-pill" alt="Pill image">Trong ví dụ trên:
- Hình ảnh đầu tiên được bo tròn nhẹ với class
rounded. - Hình ảnh thứ hai được hiển thị dưới dạng hình tròn hoàn toàn với
rounded-circle. - Hình ảnh cuối cùng có dạng oval với
rounded-pill.
3. Hình ảnh thumbnail (img-thumbnail)
Class img-thumbnail giúp tạo viền trắng mỏng xung quanh hình ảnh, đồng thời cho hình ảnh một chút bóng, làm cho hình ảnh giống như một thumbnail chuyên nghiệp.
Ví dụ
<img src="https://codetuthub.com/example/image/300x200.jpg" class="img-thumbnail" alt="Thumbnail image">Với class img-thumbnail, hình ảnh sẽ có một viền bao quanh và một chút đổ bóng, tạo ra sự tách biệt rõ ràng giữa hình ảnh và nền.
4. Căn chỉnh hình ảnh
Bootstrap 5 cung cấp các class căn chỉnh hình ảnh giúp bạn dễ dàng bố trí hình ảnh trong phần tử chứa, đặc biệt là trong các bố cục với văn bản.
Các class căn chỉnh
- float-start: Căn hình ảnh về bên trái và để văn bản bao quanh bên phải.
- float-end: Căn hình ảnh về bên phải và để văn bản bao quanh bên trái.
- mx-auto d-block: Căn giữa hình ảnh theo chiều ngang.
Ví dụ
<img src="https://codetuthub.com/example/image/150x150.jpg" class="float-start" alt="Float start">
<img src="https://codetuthub.com/example/image/150x150.jpg" class="float-end" alt="Float end">
<img src="https://codetuthub.com/example/image/150x150.jpg" class="mx-auto d-block" alt="Centered image">Trong ví dụ trên:
- Hình ảnh đầu tiên sẽ nằm bên trái và văn bản tiếp theo sẽ bao quanh bên phải.
- Hình ảnh thứ hai sẽ nằm bên phải và văn bản bao quanh bên trái.
- Hình ảnh cuối cùng sẽ được căn giữa theo chiều ngang.
5. Tỷ lệ khung hình (ratio)
Bootstrap 5 cung cấp tiện ích ratio để tạo khung hình cố định cho các hình ảnh hoặc video, giúp duy trì tỷ lệ mong muốn khi kích thước của phần tử chứa thay đổi.
Các tỷ lệ khung hình có sẵn
ratio-1x1: Tạo khung hình vuông (1:1).ratio-4x3: Tạo khung hình 4:3.ratio-16x9: Tạo khung hình 16:9.ratio-21x9: Tạo khung hình 21:9.
Ví dụ
<div class="ratio ratio-16x9">
<img src="https://codetuthub.com/example/image/1920x1080.jpg" alt="16x9 image">
</div>Trong ví dụ này, hình ảnh được đặt trong khung hình 16:9. Khi kích thước phần tử chứa thay đổi, hình ảnh sẽ tự động co giãn để giữ tỷ lệ 16:9 mà không bị méo mó.
6. Hình ảnh trong thẻ card
Khi hình ảnh được dùng trong các thẻ card, Bootstrap cung cấp class card-img-top và card-img-bottom để căn chỉnh hình ảnh ở đầu hoặc cuối thẻ.
Ví dụ
<div class="card" style="width: 18rem;">
<img src="https://codetuthub.com/example/image/300x150.jpg" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Tiêu đề thẻ</h5>
<p class="card-text">Đây là nội dung thẻ. Hình ảnh được căn ở đầu thẻ.</p>
</div>
<img src="https://codetuthub.com/example/image/300x150.jpg" class="card-img-bottom" alt="Card image bottom">
</div>Trong ví dụ trên:
card-img-topcăn chỉnh hình ảnh ở đầu thẻ, tạo thành phần hình ảnh trên cùng.card-img-bottomcăn chỉnh hình ảnh ở cuối thẻ.
7. Kết luận
Các class định dạng hình ảnh của Bootstrap 5 giúp tối ưu hóa và tạo kiểu cho hình ảnh một cách nhanh chóng và hiệu quả, từ căn chỉnh, bo tròn, tạo thumbnail cho đến giữ tỷ lệ khung hình cố định. Sử dụng các class này, bạn có thể tạo ra giao diện trực quan và đáp ứng mà không cần viết CSS phức tạp. Hãy thử áp dụng các ví dụ từ bài viết này để nâng cao trải nghiệm hình ảnh trên trang web của bạn!
