Как сделать адаптивное изображение bootstrap?

У меня есть блок высотой 300px, в стилях к этому блоку я вывожу background-image, что бы загружаемые изображения всегда были одного размера.

<div class="card-img card-img__max mb-4 banner" style="background-image: url({{$user->banner ?? asset('img/default_banner.jpg')}});"></div>

.card-img {
height: 300px;
background-position: center center;
-wekit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;

}

Всё хорошо, но когда я начинаю скукоживать страницу, изображение внутри этого блока начинает обрезаться по краям. А хотелось бы, что бы не обрезалась, а просто уменьшалась.

Такого поведения добился тем, что просто тегом img с классом img-fluid выводил картинку, всё было как нужно, но загружаемые изображения редко бываю необходимой высоты 300px, поэтому из-за этого сильно страдает дизайн страницы