Bài 7: Ảnh trong Bootstrap 5

img-fluid là gì? Nó là một phần của image Bootstrap. Dưới đây là mọi điều bạn cần biết về ảnh trong Bootstrap 5.

Bootstrap là một framework CSS mã nguồn mở, chủ yếu dành cho việc xây dựng các web đáp ứng và ứng dụng trên mobile. Framework này bao gồm các cài đặt CSS chung; một hệ thống kẻ ô đáp ứng, phần tử tạo trước, slide, biểu mẫu, thanh điều hướng và các plugin JavaScript tùy chọn. Tất cả giúp bạn tăng tốc độ phát triển web, ứng dụng.

Bạn có thể tạo các thành phần bằng cách thêm class Bootstrap vào các phần tử. Các lớp đó cũng tạo kiểu cho hình ảnh và tối ưu hóa chúng cho hành vi phản hồi, nghĩa là mở rộng tỉ lệ cùng với bộ chứa hình ảnh khi cửa sổ trình duyệt được thay đổi kích thước.

Một nhân tố quan trọng trong bố cục linh hoạt là ảnh đáp ứng. Chúng phải được thay đổi kích thước, hướng và độ phân giải dựa trên thiết bị người dùng cuối, cho phép các trang web phát hiện và đáp ứng điều kiện màn hình của từng khách truy cập. Và Bootstrap sẽ giúp bạn làm việc đó dễ dàng.

Ảnh thích ứng

Trong Bootstrap, bạn sẽ sử dụng class .img-fluid trên tất cả những hình ảnh bạn muốn nó có tính responsive. Class này sẽ "bảo" với trình duyệt là đừng mở rộng hình ảnh lớn hơn kích thước gốc của ảnh bằng cách sử dụng max-width, và thu nhỏ hình ảnh lại nếu cửa sổ trình duyệt hẹp hơn độ rộng của ảnh (tính theo pixel).

Để tạo ảnh có thể responsive, bạn thêm class .img-fluid vào thẻ <img>. Class này sẽ áp dụng max-width: 100%; và height: auto; cho ảnh.

<div class="container">
  <h2>Ảnh thích ứng</h2>
  <img src="/photos/image/2020/07/18/Quantrimangcom.jpg" 
   alt="icon Quantrimang.com" 
   class="img-fluid" 
   width="200" height="200"> 
</div>

Nếu bạn muốn fix kích thước cố định của ảnh thì chỉ cần thêm width="kich_thuoc_px" và height="kich_thuoc_px" vào sau phần tử alt của thẻ <img như trên, nếu để ảnh theo đúng kích thước gốc, bạn bỏ width và height đi là được. Chạy code trên ta có kết quả sau:

Bo góc cho ảnh

Class .rounded sẽ bo tròn góc của ảnh (tương đương với border-radius:6px;) như ví dụ dưới đây:

<div class="container">
  <h2>Bo góc ảnh</h2>           
  <img src="/photos/image/2020/07/18/Quantrimangcom.jpg" 
   alt="icon Quantrimang.com" 
   class="rounded" 
   width="200" width="200"> 
</div>

Khi đó 4 góc của ảnh sẽ được bo tròn rất nhẹ như sau:

Bo tròn ảnh

Class .rounded-circle sẽ cắt ảnh thành hình tròn như dưới đây:

<div class="container">
  <h2>Bo tròn ảnh</h2>
  <img src="/photos/image/2020/07/18/Quantrimangcom.jpg" 
   class="rounded-circle" 
   alt="Quantrimang.com" 
   width="200" height="200"> 
</div>

Ảnh up lên có nền hồng, nhưng khi sử dụng class .rounded-circle thì bạn chỉ còn nhìn thấy như dưới đây:

Hình thu nhỏ, thumbnail trong Bootstrap

Class .img-thumbnail sẽ chuyển ảnh thành ảnh thu nhỏ, có đường viền. Và cũng giống như trên, nếu cần fix kích thước bạn chỉ cần khai báo chiều rộng và chiều cao của ảnh.

<div class="container">
  <h2>Thumbnail</h2>           
  <img src="/photos/image/2020/07/18/Quantrimangcom.jpg" 
   alt="icon Quantrimang.com" 
   class="img-thumbnail" 
   width="200" width="200"> 
</div>

Khi chạy file trên bạn sẽ nhận được kết quả như sau:

Căn lề trái/phải cho ảnh

Bạn căn ảnh sang bên phải bằng cách sử dụng class .float-right, căn sang bên trái với .float-left:

<div class="container">
  <h2>Căn lề cho ảnh</h2>
  <img src="/photos/image/2020/07/17/table-bang-bootstrap-200.png" 
   class="float-left" 
   alt="Bootstrap" 
   width="200" height="200"> 
  <img src="/photos/image/2020/07/17/table-bang-bootstrap-200.png" 
  class="float-right" 
  alt="Bootstrap" 
  width="200" height="200"> 
</div>

File trên căn ảnh trái và phải cùng lúc để bạn tiện theo dõi, kết quả như sau:

Căn ảnh ra giữa trên Bootstrap

Để căn giữa ảnh thì phức tạp hơn một chút, bạn sẽ phải thêm class .mx-auto (margin:auto) và .d-block (display:block) cho ảnh, như ví dụ dưới đây:

<div class="container">
  <h2>Căn giữa ảnh</h2>
  <img src="/photos/image/2020/07/17/table-bang-bootstrap-200.png" 
class="mx-auto d-block" 
style="width:50%" 
alt="Bootstrap">
</div>

Kết quả là ảnh đã được căn giữa như hình dưới đây: