Bootstrap 5 hình ảnh
Hình dạng hình ảnh
Các góc tròn:
Vòng tròn:
Hình nhỏ:
góc tròn
Lớp .rounded thêm các góc tròn vào hình ảnh:
Vòng tròn
Lớp .rounded-circle định hình hình ảnh thành một hình tròn:
Hình nhỏ
Lớp .img-thumbnail định hình hình ảnh thành hình thu nhỏ (có viền):
Căn chỉnh hình ảnh
Đưa hình ảnh sang trái bằng lớp .float-start hoặc sang phải bằng lớp .float-end :
Ví dụ
<img src="paris.jpg" class="float-start">
<img src="paris.jpg"
class="float-end"> Hãy tự mình thử »Hình ảnh được căn giữa
Căn giữa hình ảnh bằng cách thêm các lớp tiện ích .mx-auto (lề:auto) và .d-block (display:block) vào hình ảnh:
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 phản hồi bằng cách thêm lớp .img-fluid vào thẻ <img> . Sau đó, hình ảnh sẽ có tỷ lệ phù hợp với phần tử gốc.
Lớp .img-fluid áp dụng max-width: 100%; và height: auto; đến hình ảnh:
Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap 5.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
