Bootstrap 5 hình ảnh

Hình dáng hình ảnh

Góc tròn

.rounded class sẽ thêm góc tròn cho hình ảnh:

Mô hình

<img src="flower.jpg" class="rounded" alt="Flower">

Thử ngay

Hình tròn

.rounded-circle class sẽ làm hình ảnh thành hình tròn:

Mô hình

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

Thử ngay

Hình thu nhỏ

.img-thumbnail class sẽ làm hình ảnh thành hình thu nhỏ (đ自带 viền):

Mô hình

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

Thử ngay

căn chỉnh hình ảnh

để .float-start class sẽ làm hình ảnh chìm sang trái, hoặc sử dụng .float-end Chìm phải:

Mô hình

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Thử ngay

Hình ảnh chính giữa

Để làm cho hình ảnh chính giữa, chúng tôi đã thêm utility class vào hình ảnh. .mx-auto (margin:auto) và .d-block (display:block)：

Mô hình

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

Thử ngay

Hình ảnh tương ứng

hình ảnh có nhiều kích thước khác nhau. Màn hình cũng vậy. Hình ảnh tương ứng sẽ tự động điều chỉnh để phù hợp với kích thước màn hình.

bằng cách đặt .img-fluid thêm class vào <img> thẻ để tạo hình ảnh tương ứng. Sau đó, hình ảnh sẽ được thu gọn tốt trong phần tử cha.

.img-fluid dùng class cho hình ảnh ứng dụng max-width: 100%; và height: auto; ：

Mô hình

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Thử ngay