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 a segítségével érzékenyek .img-fluid
. max-width: 100%;
és height: auto;
alkalmazzák a képre úgy, hogy az a szülőelemmel arányosuljon.
<img src="..." class="img-fluid" alt="...">
SVG képek és Internet Explorer
Az Internet Explorer 10 és 11 böngészőben az SVG-képek .img-fluid
aránytalanul nagyok. Ennek kijavításához adja hozzá width: 100%;
vagy .w-100
ahol szükséges. Ez a javítás helytelenül 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-thumbnail
a képnek lekerekített, 1 képpontos szegélyt adhat.
<img src="..." class="img-thumbnail" alt="...">
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-auto
margó hasznossági osztály használatával .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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>