Bootstrap 4 Image Shapes (Các hình dạng ảnh)

Rounded Corners

Class .rounded thêm các góc tròn cho ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Circle

Class .rounded-circle làm tròn bức ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail

Class .img-thumbnail làm khung cho ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Aligning Images (Căn chỉnh hình ảnh)

Muốn ảnh sang phải ta dùng .float-right sang trái thì .float-left:

Ví dụ

<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">

Centered Image (Căn giữa hình ảnh)

Căn giữa một hình ảnh bằng cách thêm các class .mx-auto (margin:auto) và .d-block (display:block):

Ví dụ

<img src="paris.jpg" class="mx-auto d-block">

Responsive Images (Ảnh responsive)

Tự động điều chỉnh hình ảnh cho vừa màn hình

Tạo ảnh responsive bằng cách thêm class .img-fluid vào thẻ <img>. Sau đó, hình ảnh sẽ tự động chia tỷ lệ sao cho vừa so với thành phần chứa nó.

Class .img-fluid áp dụng max-width: 100%; và height: auto; cho ảnh:

Ví dụ

<img class="img-fluid" src="img_chania.jpg" alt="Chania">