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.

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

<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

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

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