Obrazki bootstrap

Responsywnie

Czegoś takiego jak obrazki, zdjęcia na stronach fotografów jest od groma, podobnie w sklepach, katalogach itp. Nie umknął ten fakt twórcom bootstrap i także obrazki mają coś od nich. Dzięki klasom przeznaczonym do formatowania obrazków mamy możliwość uczynienia ich responsywnymi (skalują się wraz z elementem rodzica – na smartfonie są malutkie a na laptopie duże).

Poniższy przykład można obejrzeć też na stronie -> https://www.rafalrebacz.pl/examples/bootstrap/obrazki1.html oraz https://www.rafalrebacz.pl/examples/bootstrap/obrazki1noresponsive.html

Tak wygląda strona, na której mamy kilka obrazków w rozmiarze 1280×853 i obrazki te mają dodaną klasę „img-responsive”.

No a tak wygląda strona, które ma obrazki „zwyczajne” – bez responsywności (jak widać obrazki nie są skalowane i nie mieszczą się w oknie).

Ładnie

Pięknie wyglądają nasze zdjęcia na stronach, budzą podziw innych i radują serca. No a może by je tak „uładnić”? Popatrzmy co zatem oferuje nam bootstrap w zakresie „uładnienia” obrazka. Oferuje nam trzy klasy „img-rounded”, „img-circle” oraz „img-thumbnail”. Już z nazwy widać co każda z tych klas zrobi ze zdjęciem. No ale sprawdźmy w praktyce co się z będzie dziać ze zdjęciami po zastosowaniu do nich tych klas (dla obrazków będących zdjęciami w wymiarach 140×140).

Poniżej przykład z zastosowania tych trzech klas:

 

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz