Bootstrap 4 hình ảnh
Bootstrap 4 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
Di chuyển hình ảnh sang phải bằng lớp .float-right
hoặc sang trái bằng lớp .float-left
:
Ví dụ
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
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: