Bootstrap - Как сделать изображение отзывчивым на некоторые точки останова?

Question

Я новичок в Bootstrap, и это мой первый опыт. Заголовок моего сайта похож на следующее изображение

Я хочу, чтобы это изображение было отзывчивым на средних и больших устройствах, но на меньших устройствах я хочу, чтобы оно было обрезано по центру и было бы похоже на это

Я пытался сделать это, но мне не удалось. Как я могу это сделать?

---

Это мой код, он работает, но выглядит не очень хорошо

<div class="row">
    <div class="col" id="header-image">
      <img src="images/head.jpg" class="img-fluid" style="z-index: -1; visibility: hidden">
    </div>
</div>

<style type="text/css">
@media only screen and (max-width: 768px) {
  #header image{
    background-position: center !important;
    background-size: auto 100% !important;
    height: 217px;
  }
}
#header #header-image{
   background-image: url("images/head.jpg");
   background-size: 100% auto ;
   background-position: center;
}

Answer 1

Используйте object-fit:cover на вашем изображении. Обрезает изображение с боков и сохраняет его соотношение. Работает и для отзывчивых.

Answer 2

Вы можете использовать CSS правила мультимедиа: Правила использования CSS