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

2.78K views
0
0 Comments

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.

Marcin Wesel Answered question 29 października 2020
Add a Comment
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.

Marcin Wesel Answered question 29 października 2020
Add a Comment
You are viewing 1 out of 1 answers, click here to view all answers.
Write your answer.
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.