Za darmo na e-mailPraktyczny kurs PHP (aż 200 stron!)

Krok po kroku, opanuj podstawy PHP za darmo - praktyczny kurs w formie e-booka prosto na Twój e-mail

Responsywny obrazek na całą szerokość Bootstrap

odsłon: 2.39K
0
Komentarzy: 0

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.

odpowiedział na pytanie
Dodaj komentarz
0

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.

odpowiedział na pytanie
Dodaj komentarz
Przeglądasz właśnie 1 z 1 odpowiedzi, kliknij tutaj by zobaczyć wszystkie.
Wpisz swoją odpowiedź.
Ominiesz taką okazję?Praktyczny Kurs PHP (aż 200 stron!) za darmo

Gorąco polecam, naprawdę warto skorzystać! To nic nie kosztuje. Krok po kroku, opanuj podstawy PHP za darmo - praktyczny kurs w formie e-booka prosto na Twój e-mail.