html - 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。它从侧面裁剪图像并保持其比例。也适用于响应式。