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

debugcn 发表于 Dev

恩西尔瓦

我有以下代码：

.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>

我要实现的是：

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

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

我怎样才能做到这一点？

我已经对目前的代码做了一个JSFIDDLE。

约翰尼斯

使用以下设置作为背景：

.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％，宽度与高度成正比（自动），在两个方向上居中（只有水平居中有效），并且不重复。

这是一个小提琴：https : //jsfiddle.net/q3m23Ly8/1/

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。