Ảnh trong bootstrap 5

Bài 6: Bảng trong Bootstrap 5

Bài viết này sẽ mô tả cách Bootstrap hỗ trợ định dạng hiển thị cho phần hình ảnh.

Ả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/2022/sini.png" 
     alt="icon Sinitc.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/2022/sini.png" 
   alt="icon Sinitc.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:

Ả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/2022/sini.png" 
        alt="icon Sinitc.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 srcphotos/image/2022/table-bang-bootstrap-200.png" 
   class="float-left" 
   alt="Bootstrap" 
   width="200" height="200"> 
  <img src="photos/image/2022/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/2022/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:

• Bài  8: Jumbotron trong Bootstrap