Bootstrap 4 hình ảnh
Bootstrap 4 Hình dạng Hình ảnh
Góc tròn:
Khoanh tròn:
Hình nhỏ:
Góc tròn
Lớp .roundedthêm các góc tròn vào hình ảnh:
Thí dụ
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Khoanh tròn
Cả .rounded-circlelớp nắn hình ảnh thành hình tròn:
Thí dụ
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Hình nhỏ
Lớp .img-thumbnailđịnh hình hình ảnh thành hình thu nhỏ (có viền):
Thí dụ
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Căn chỉnh hình ảnh
Làm nổi một hình ảnh ở bên phải với .float-rightlớp hoặc bên trái với .float-left:
Thí dụ
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Hình ảnh ở giữa
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:
Thí dụ
<img src="paris.jpg" class="mx-auto d-block">
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 một .img-fluidlớp vào <img>thẻ. Sau đó, hình ảnh sẽ thay đổi tỷ lệ phù hợp với phần tử mẹ.
Lớp .img-fluidáp dụng max-width: 100%;và
height: auto;hình ảnh:
Thí dụ
<img class="img-fluid" src="img_chania.jpg" alt="Chania">