Obrazy / Images

Sprawdź najnowszą wersję komponentu images zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Zdjęcia, grafiki, ikony – to nieodłączne elementy nowoczesnych stron internetowych. W tym wpisie zajmiemy się przygotowaniem responsywnego obrazu, czyli takiego, który będzie się proporcjonalnie zwiększał/zmniejszał w zależności od rozdzielczości. Dodatkowo poznamy kilka klas, które pozwalają na zmianę kształtu zdjęcia czy grafiki oraz dowiemy się jak ustawiać je do prawej, lewej czy wyśrodkować.

Obraz responsywny

Aby nasza grafika mogła się płynnie skalować należy nadać jej klasę .img-fluid. Klasa ta dodaje max-width: 100%; oraz height: auto; dzięki czemu niezależnie od rozmiaru ekranu, zdjęcie nie będzie się nieproporcjonalnie rozciągało. Unikniemy też tym sposobem sytuacji gdy nasze zdjęcie o wymiarach 1280×800 będzie „wyjeżdzało” poza ekran na smartfonie czy tablecie. Oczywiście max-width: 100% nie oznacza, że zdjęcie ma się rozciągnąć na całą szerokość kontenera, przez co straciło by na jakości a jedynie tyle, że nie może być większe niż 100% swojej szerokości. Zmniejszcie sobie okno przeglądarki by zobaczyć jak zachowuje się poniższy obrazek.

Przykład

<img src="https://placehold.it/640x480" class="img-fluid">

Kształty obrazów

Bootstrap oferuje nam trzy klasy, dzięki którym możemy zaokrąglić rogi .rounded, umieścić go w okręgu .rounded-circle lub dodać mu ramkę .img-thumbnail.

Przykład

<img src="https://placehold.it/200?text=.img-rounded" alt="Placeholder" class="rounded">
<img src="https://placehold.it/200?text=.img-circle" alt="Placeholder" class="rounded-circle">
<img src="https://placehold.it/200?text=.img-thumbnail" alt="Placeholder" class="img-thumbnail">

Ustawianie obrazów

Gdybyśmy chcieli wycentrować obraz bądź wyrównać go do prawej krawędzi diva to oczywiście mamy przygotowane do tego gotowe klasy:)

Najpierw „przestawianie” obrazów. Mamy tutaj do dyspozycji klasę .float-left, która „przestawia” obraz w lewo. Druga klasa to .float-right która, jak się pewnie domyślacie, wyrównuje do prawej krawędzi.

Przykład

<img src="https://placehold.it/200?text=.float-left" class="rounded float-left" alt="...">
<img src="https://placehold.it/200?text=.float-right" class="rounded float-right" alt="...">
<div class="clearfix"></div>

Skoro wiemy już jak dorównać obrazy do krawędzi, to teraz dobrze było by wiedzieć, jak je wyśrodkować. Tutaj mamy dwie metody. Jedna polega na dodanie do obrazu klas .mx-auto oraz d-block. Druga natomiast polega na stworzeniu diva z klasą .text-center wokół obrazka.

Metoda z .m-x-auto:

Przykład

<img src="https://placehold.it/300?text=.mx-auto+.d-block" alt="Placeholder" class="mx-auto d-block">

Metoda z .text-center:

Przykład

<div class="text-center">
    <img src="https://placehold.it/300?text=.text-center" alt="Placeholder">
</div>