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 media Rules