Source

Beelde

Dokumentasie en voorbeelde vir die keuse van beelde in responsiewe gedrag (sodat hulle nooit groter as hul ouerelemente word nie) en voeg liggewigstyle daarby – alles via klasse.

Responsiewe beelde

Prente in Bootstrap word reageer met .img-fluid. max-width: 100%;en height: auto;word op die beeld toegepas sodat dit met die ouerelement skaal.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG-beelde en IE 10

In Internet Explorer 10 is SVG-beelde met .img-fluidbuite verhouding groot. Om dit reg te stel, voeg by width: 100% \9;waar nodig. Hierdie regstelling pas ander beeldformate onbehoorlik aan, so Bootstrap pas dit nie outomaties toe nie.

Prent-kleinkiekies

Benewens ons grensradius-hulpmiddels , kan jy gebruik .img-thumbnailom 'n prent 'n afgeronde 1px-randvoorkoms te gee.

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

Belyn beelde

Belyn beelde met die helper-float-klasse of teksbelyningsklasse . block-vlak beelde kan gesentreer word met behulp van die .mx-automarge-nutsklas .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Prent

As jy die <picture>element gebruik om veelvuldige <source>elemente vir 'n spesifieke , te spesifiseer <img>, maak seker dat jy die .img-*klasse by die <img>en nie by die <picture>merker voeg nie.

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