Source

Képek

Dokumentáció és példák a képek reszponzív viselkedésre való beállításához (hogy soha ne legyenek nagyobbak, mint a szülőelemeik), és könnyű stílusokat adjon hozzájuk – mindezt osztályokon keresztül.

Reszponzív képek

A Bootstrap képei reszponzívvá lettek a segítségével .img-fluid. max-width: 100%;és height: auto;alkalmazzák a képre úgy, hogy az a szülőelemmel arányos legyen.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG képek és IE 10

Az Internet Explorer 10 böngészőben az SVG-képek .img-fluidaránytalanul nagyok. Ennek kijavításához adja hozzá, width: 100% \9;ahol szükséges. Ez a javítás nem megfelelően méretezi a többi képformátumot, így a Bootstrap nem alkalmazza automatikusan.

Kép miniatűrök

A szegélysugár segédprogramjaink mellett .img-thumbnaila képnek lekerekített, 1 képpontos szegélyt adhat.

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

Képek igazítása

Igazítsa a képeket a segédlebegő osztályokhoz vagy a szövegigazítási osztályokhoz . block-szintű képek középre igazíthatók a .mx-automargó hasznossági osztály használatával .

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>

Kép

Ha az <picture>elemet több <source>elem megadására használja egy adott <img>, akkor ügyeljen arra, hogy az .img-*osztályokat a címkéhez adja hozzá, <img>és ne a <picture>címkéhez.

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