Source

Görüntüler

Görüntüleri duyarlı davranışa seçmeye yönelik belgeler ve örnekler (böylece hiçbir zaman üst öğelerinden daha büyük olmazlar) ve tümü sınıflar aracılığıyla bunlara hafif stiller ekleyin.

Duyarlı görüntüler

Bootstrap'teki resimler ile duyarlı hale getirilir .img-fluid. max-width: 100%;ve height: auto;ana öğeyle ölçeklenecek şekilde görüntüye uygulanır.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG görüntüleri ve IE 10

Internet Explorer 10'da, SVG görüntüleri .img-fluidorantısız şekilde boyutlandırılmıştır. Bunu düzeltmek için width: 100% \9;gerektiğinde ekleyin. Bu düzeltme, diğer görüntü biçimlerini hatalı şekilde boyutlandırır, bu nedenle Bootstrap bunu otomatik olarak uygulamaz.

Küçük resimler

Border-radius yardımcı programlarımıza ek olarak , .img-thumbnailbir görüntüye yuvarlak 1 piksel kenarlık görünümü vermek için kullanabilirsiniz .

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">

Görüntüleri hizalama

Görüntüleri yardımcı kayan sınıflarla veya metin hizalama sınıflarıyla hizalayın . -seviyedeki görüntüler , kenar boşluğu yardımcı sınıfıblock kullanılarak ortalanabilir ..mx-auto

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>

Resim

Belirli bir öğe için birden çok öğe <picture>belirtmek üzere öğeyi kullanıyorsanız , sınıfları etikete değil etikete eklediğinizden emin olun .<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>