Imagini

Documentație și exemple pentru alegerea imaginilor într-un comportament receptiv (astfel încât să nu devină niciodată mai largi decât părintele lor) și să le adauge stiluri ușoare, toate prin intermediul cursurilor.

Pe aceasta pagina

Imagini receptive

Imaginile din Bootstrap sunt adaptate cu .img-fluid. Acest lucru se aplică max-width: 100%;și height: auto;imaginii, astfel încât să se scaleze cu lățimea părinte.

html

<img src="..." class="img-fluid" alt="...">

Miniaturi de imagine

Pe lângă utilitățile noastre pentru raza de margine , puteți folosi .img-thumbnailpentru a da unei imagini un aspect de chenar rotunjit de 1 px.

html

<img src="..." class="img-thumbnail" alt="...">

Alinierea imaginilor

Aliniați imaginile cu clasele helper float sau cu clasele de aliniere a textului . blockImaginile -level pot fi centrate folosind clasa .mx-autode utilitate margine .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

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

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Imagine

Dacă utilizați <picture>elementul pentru a specifica mai multe <source>elemente pentru un anumit <img>, asigurați-vă că adăugați .img-*clasele la etichetă <img>și nu la <picture>etichetă.

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

Sass

Variabile

Variabilele sunt disponibile pentru miniaturile imaginilor.

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