in English

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="...">
Hình ảnh SVG và Internet Explorer

In Internet Explorer 10 and 11, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100%; or .w-100 where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

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="..." class="img-thumbnail" alt="...">

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

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>

Picture

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>