Source

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 lớn hơn các phần tử mẹ 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. max-width: 100%;và height: auto;được áp dụng cho hình ảnh để nó thay đổi tỷ lệ với phần tử mẹ.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Hình ảnh SVG và IE 10

Trong Internet Explorer 10, hình ảnh SVG với .img-fluidcó kích thước không cân đối. Để khắc phục điều này, hãy thêm vào width: 100% \9;những nơi cần thiết. Điều này khắc phục sự cố định kích thước các định dạng hình ảnh khác không đúng, vì vậy Bootstrap không tự động áp dụng nó.

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.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

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ề .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>