CSS - Responsive - Crop linken und rechten Teil eines Hintergrundbildes, wie Sie die Breite des Browsers anpassen

Question

Ich habe den folgenden Code: -

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

 

Was ich erreichen will ist: -

Wenn Sie beginnen, die Browserbreite von 1920px auf 1170px zu verkleinern, wird der linke und rechte Teil des Bildes abgeschnitten (beschnitten).

Also, wenn die Browserbreite bei 1720px war, wird im Wesentlichen 100px von der linken Seite des Bildes entfernt und 100px von rechts entfernt, aber das Bild behält die 565px Höhe.

Wie kann ich das erreichen?

Ich habe eine JSFIDDLE des Codes gemacht, den ich im Moment habe.

Answer 1

diese Einstellungen für die Hintergrund-Verwendung:

.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%; 
} 

-> dh Höhe 100% der Mutterelement, Breite proportional zur Höhe (AUTO), in beiden Richtungen zentriert (wo nur die horizontale Zentrierung wirksam ist) und ohne zu wiederholen.

Hier ist eine Geige: (auch das Stil-Attribut aus dem HTML entfernt I) https://jsfiddle.net/q3m23Ly8/1/

Answer 2

die Inline-Stil des div Element entfernen, weil es die CSS-Regeln überschreiben:

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

Der wichtige Teil der background-size ist. auto 100% teilt dem Browser mit, dass der Hintergrund immer 100% der Höhe abdecken soll, die Breite wird automatisch berechnet.

Answer 3

Versuchen unter css für reaktions:

die div Höhe einstellen, wie pro Sie benötigt.

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