Obrazy
Dokumentacja i przykłady dodawania obrazów do zachowania responsywnego (aby nigdy nie stały się większe niż ich elementy nadrzędne) i dodawania do nich lekkich stylów — wszystko za pośrednictwem klas.
Responsywne obrazy
Obrazy w Bootstrap są responsywne dzięki .img-fluid
. max-width: 100%;
i height: auto;
są stosowane do obrazu tak, aby skalował się z elementem nadrzędnym.
<img src="..." class="img-fluid" alt="...">
Obrazy SVG i Internet Explorer
W Internet Explorer 10 i 11 obrazy SVG z .img-fluid
mają nieproporcjonalną wielkość. Aby to naprawić, dodaj width: 100%;
lub .w-100
w razie potrzeby. Ta poprawka nieprawidłowo dopasowuje rozmiary innych formatów obrazów, więc Bootstrap nie stosuje jej automatycznie.
Miniatury obrazów
Oprócz naszych narzędzi border-radius , możesz użyć .img-thumbnail
do nadania obrazowi zaokrąglonego wyglądu ramki 1px.
<img src="..." class="img-thumbnail" alt="...">
Wyrównywanie obrazów
Wyrównaj obrazy z klasami pływaka pomocniczego lub klasami wyrównania tekstu . block
Obrazy na poziomie mogą być wyśrodkowane przy użyciu klasy .mx-auto
narzędziowej margin .
<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>
Obrazek
Jeśli używasz <picture>
elementu do określenia wielu <source>
elementów dla konkretnego <img>
, upewnij się, że dodajesz .img-*
klasy do tagu, <img>
a nie do <picture>
tagu.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>