Как сделать адаптивное изображение с помощью Bootstrap?

Question

[Анастасия]

У меня есть два блока col-lg-6:

<div class="container">
            <div class="row">
                <div class="col-lg-6 mt-5">
                    <p>Text</p>
                </div>
                <div class="col-lg-6 mt-5 illustration_bg">
                    <img src="img/krolik_paczki.svg" alt="logo">
                </div>
            </div>
        </div>

Один блок должен содержать изображение, которое должно быть больше него. И изображение должно адаптироваться согласно размеру экрана. Сейчас при уменьшении экрана появляется горизонтальный скролл и изображение выходит за пределы экрана.



Каким способом это можно сделать?

Answer 1

[xdevelx]

.img {
  max-width: 100%;
  height: auto;
}

У bootstrap есть класс .img-fluid