CSS

Question

我有以下代码：-

.content {
      width: 100%;
      text-align: center;
      overflow: hidden;
    }
    
    .expert-header {
      position: relative;
      width: 100%;
      height: 565px;
      display: block;
      background-size: cover !important;
      background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
    }

    <div class="content">
      <div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
      </div>
    </div>

我要实现的是：-

当您开始将浏览器宽度从 1920 像素缩小到 1170 像素时，它会切断（裁剪）图像的左右部分。

因此，如果浏览器宽度为 1720 像素，基本上会从图像左侧移除 100 像素，从右侧移除 100 像素，但图像将保留 565 像素的高度。

我该如何实现？

我已经制作了一个 JSFIDDLE 我目前拥有的代码。

Answer 1

删除 div 元素的内联样式，因为它会覆盖 CSS 规则：

background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;

重要的部分是background-size。 auto 100% 会告诉浏览器背景应该始终覆盖 100% 的高度，宽度会自动计算。

Answer 2

尝试以下 css 以获得响应：

根据需要设置 div 高度。

.content {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.expert-header {
  position: relative;
  width: 100%;
  height: 250px /* Set height as per you needed */;
  display: block;
  background-size: 100% auto !important;
  background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
  background-repeat: no-repeat !important;
}

<div class="content">
  <div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
  </div>
</div>

Answer 3

对背景使用这些设置：

.expert-header {
  background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)  center center no-repeat;
  background-size: auto 100%;
}

-> 即高度为父元素的 100%，宽度与高度成比例（自动），两个方向居中（只有水平居中有效）并且不重复。

这里是 fiddle：https://jsfiddle.net/q3m23Ly8/1/

（我还从 HTML 中删除了样式属性）

CSS - 响应式 - 在调整浏览器宽度时裁剪背景图像的左右部分

CSS - Responsive - Crop left and right part of a background image as you adjust the width of the browser

responsive