Hướng dẫn bootstrap 4 size image

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

Responsive images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

 
 class="text-center">
  
Hình ảnh có góc tròn
Lớp .rounded thêm các góc tròn vào hình ảnh:
Ví dụ:
 
Hình ảnh hiển thị dạng tròn
Lớp .rounded-circle định hình hình ảnh thành hình tròn:
 

Hình thu nhỏ (thumbnail)
Lớp .img-thumbnail định hình hình ảnh thành hình thu nhỏ (có viền):



 
Code minh họa cả 3 trường hợp



  
  
  
  
  
  
  


  
  

    

    
 
    
    

    
 
    
    

    
 
    
    



Căn chỉnh hình ảnh (Aligning Images)
Bootstrap 4 sử dụng lớp .float-right để căn chỉnh ảnh sang bên phải hoặc sang bên trái với .float-left:
Ví dụ:
  
  




Căn giữa Hình ảnh
Căn giữa hình ảnh bằng cách thêm các lớp tiện ích .mx-auto (margin: auto) và .d-block (display: block) vào hình ảnh:
  " alt="CTY" width="160" height="160!important">
Hình ảnh đáp ứng
Hình ảnh có đủ kích cỡ. Màn hình cũng vậy. Hình ảnh đáp ứng tự động điều chỉnh để phù hợp với kích thước của màn hình.
Tạo hình ảnh đáp ứng bằng cách thêm lớp .img-fluid  vào thẻ 
Lời kết:
Việc áp dụng các lớp hiển thị hình ảnh trong Bootstrap 4 làm cho ảnh của bạn sinh động và hấp dẫn hơn. Tuy nhiên các bạn cũng đừng quá lạm dụng nó vì sửu dụng nhiều quá sẽ gây nên rối mắt hơn. Chúc các bạn học tốt!