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.

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

Miniaturi de imagine

În plus față de utilitățile noastre pentru raza de frontieră , puteți folosi .img-thumbnailpentru a da unei imagini un aspect de chenar rotunjit de 1 px.

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

Alinierea imaginilor

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

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

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

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

Picture

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

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

Sass

Variables

Variables are available for image thumbnails.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;