Source

Myndir

Skjöl og dæmi um að velja myndir í móttækilegri hegðun (svo þær verði aldrei stærri en foreldri þættir þeirra) og bæta léttum stíl við þær - allt í gegnum flokka.

Móttækilegar myndir

Myndir í Bootstrap eru gerðar móttækilegar með .img-fluid. max-width: 100%;og height: auto;eru settar á myndina þannig að hún mælist með foreldishlutanum.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG myndir og IE 10

Í Internet Explorer 10 eru SVG myndir með .img-fluidóhóflega stórar. Til að laga þetta skaltu bæta við width: 100% \9;þar sem þörf krefur. Þessi lagfæring stærir önnur myndsnið á óviðeigandi hátt, þannig að Bootstrap beitir henni ekki sjálfkrafa.

Smámyndir

Til viðbótar við landamæraradíus tólin okkar geturðu notað .img-thumbnailtil að gefa mynd ávöl 1px rammaútlit.

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

Samræma myndir

Stilltu myndir við hjálparflotaflokka eða textajöfnunarflokka . blockHægt er að miðja myndir á stigi með því að nota margin .mx-autogagnsemi flokkinn .

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>

Mynd

Ef þú ert að nota <picture>þáttinn til að tilgreina marga <source>þætti fyrir tiltekið <img>, vertu viss um að bæta .img-*flokkunum við en <img>ekki við <picture>merkið.

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