Obrazy / Images

7 383 1

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

Kod

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

Placeholder
Placeholder
Placeholder

Kod

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

......

Kod

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

Placeholder

Kod

Metoda z .text-center:

Przykład

Placeholder

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (27 głosów, średnia: 4,70 na 5)
Loading...

Jeden komentarz w “Obrazy / Images

Kamil

Nie wiem czy tylko u mnie, ale te „okrągłe” zdjęcia są kwadratowe 🙂 i nie centruje pierwszą metodą. A tak poza tym świetne tutoriale 🙂

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*