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> 
 

 

我想達到什麼是： -

當您開始縮小瀏覽器寬度從1920px到1170px時，它會切斷（裁剪）圖像的左側和右側部分。

因此，如果瀏覽器寬度爲1720px，基本上100px將從圖像左側移除，100px從右側移除，但圖像將保留565px高度。

我該如何做到這一點？

我已經做了JSFIDDLE我現在的代碼。

Answer 1

使用這些設置爲背景：

.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的style屬性）

Answer 2

取出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 3

請嘗試以下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>