Hình ảnh
Tài liệu và ví dụ để chọn hình ảnh vào hành vi đáp ứng (để chúng không bao giờ trở nên rộng hơn so với trang gốc của chúng) và thêm các kiểu nhẹ cho chúng — tất cả đều thông qua các lớp.
Hình ảnh đáp ứng
Hình ảnh trong Bootstrap được tạo phản hồi với .img-fluid. Điều này áp dụng max-width: 100%;và height: auto;cho hình ảnh để nó thay đổi tỷ lệ với chiều rộng gốc.
<img src="..." class="img-fluid" alt="...">Hình thu nhỏ của hình ảnh
Ngoài các tiện ích bán kính đường viền của chúng tôi , bạn có thể sử dụng .img-thumbnailđể cung cấp cho hình ảnh một đường viền tròn 1px.
<img src="..." class="img-thumbnail" alt="...">Căn chỉnh hình ảnh
Căn chỉnh hình ảnh với các lớp float trợ giúp hoặc các lớp căn chỉnh văn bản . block-level hình ảnh có thể được căn giữa bằng cách sử dụng lớp .mx-autotiện ích lề .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="..."><img src="..." class="rounded mx-auto d-block" alt="..."><div class="text-center">
<img src="..." class="rounded" alt="...">
</div>Hình ảnh
Nếu bạn đang sử dụng <picture>phần tử để chỉ định nhiều <source>phần tử cho một phần tử cụ thể <img>, hãy đảm bảo thêm các .img-*lớp vào <img>và không vào <picture>thẻ.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Biến
Các biến có sẵn cho hình thu nhỏ của hình ảnh.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;