Cześć,
może będziecie mi w stanie pomóc. Próbuję wyświetlić obrazek, który będzie się dynamicznie dopasowywał do szerokości kolumny ustawianej przez Bootstrapa. W chwili obecnej, mimo ustawienia struktury jak należy:
<div class="row"> <div class="col-xl-4 col-lg-6"> <img src="//url" alt="alt" /> </div> </div>
Wyświetlany obrazek zdaje się w ogóle nie reagować na zmiany wielkości ekranów. Mam teraz taki efekt na telefonie, że obrazek jest wyświetlany dalej w pełnym rozmiarze i wykracza zdecydowanie poza obramowania col, co daje efekt pokazywania części obrazka, a reszta jest ukryta poza krawędzią ekranu. Można co prawda palcem przesunąć tę niewidoczną część i ją wyświetlić, ale nie taki efekt chciałbym osiągnąć.
Co mogę zrobić, żeby obrazek wyświetlał się zgodnie z wymiarami kolumn? Czyli przy małych ekranach sam dopasował się do wielkości i zmniejszył proporcjonalnie.
Myślałem, że samo użycie Bootstrapa do tego wystarczy.
1 Odpowiedź
Tak, samo użycie Bootstrapa jak najbardziej wystarczy. Natomiast, by obrazek stał się responsywny i dopasowywał płynnie do szerokości kolumny, musisz użyć dodatkowego stylu na atrybucie img. Samo opakowanie go w row i column nie wystarczy.
W Bootstrapie v4 jest to: <img src="//url" alt="alt" class="img-fluid" /> img-fluid. W poprzednich wersjach bootstrapa chyba była to klasa img-responsive.
