Hình ảnh

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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;