Seiten des Bildes auf kleinen Bildschirmen ausschneiden

Question

Ich benutze Bootstrap und ich habe ein Banner (1920 * 250px) über dem oberen Rand meiner Seite. Das Banner reagiert (unter Verwendung von .img-responsive).
Auf kleinen Bildschirmen (sm und xs) obwohl ich die Seiten wegschneiden möchte, so dass das Banner eine neue Basisbreite von 1140px hat () Ich möchte die Basishöhe bei 250px Ich möchte das Bild verhalten, wie es 1140 ist * 250px und immer noch reagieren), aber ich habe keine Ahnung, wie das geht.
Ich wäre dankbar für jede Hilfe.

Edit: Hier ist eine bessere Erklärung, was ich will:
Ich habe eine Fahne, die 1920 * 250 Pixel groß ist. Es enthält einen Abschnitt (1140 * 250px) in der Mitte, die ein Logo enthält, ich möchte, dass dieser Abschnitt immer vollständig sichtbar sein wird, das Layout des Banners ist ungefähr so: http://i.imgur.com/kNBqEGD.jpg Das Bild wird mit .img-responsive reaktionsfähig gemacht, so dass es ändert sich mit dem Fenster. Auf kleinen Bildschirmen ist der mittlere Bereich mit dem Logo jedoch sehr klein, so dass ich die dekorativen Seitenstücke loswerden möchte. Der verbleibende mittlere Abschnitt muss noch ansprechbar sein, damit das Logo vollständig sichtbar bleibt.
http://i.imgur.com/RrEJgNt.jpg

Answer 1

In einer Medienabfrage, können Sie absolut das Bild positionieren und verwenden left: 50%; transform: translateX(-50%) es horizontal zu zentrieren, während die ursprüngliche Höhe zu halten.

.img-responsive { max-width: 100%; } 
 

 
@media (max-width: 1000px) { 
 
    .cropped { 
 
    position: relative; 
 
    height: 250px; 
 
    } 
 
    .cropped .img-responsive { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    max-width: 150%; 
 
    } 
 
}

<div class="cropped"><img src="http://placehold.it/1920x250" class="img-responsive"></div>

Answer 2

Wenn es absolut positioniert werden, können Sie einen CSS-Clip verwenden:

img { 
    position: absolute; 
    clip: rect(0px,1530px,250px,390px); 
    } 

Oder (möglicherweise eine vernünftigere Lösung) können Sie diese in einem übergeordneten Container setzen und verstecken Überlauf:

<div id="bannerContainer"> 
    <img src="blahblah.jpg" class="yourimage" alt="hi" /> 
</div> 

#bannerContainer { 
    width: 1140px; 
    height: 250px; 
    text-align: center; 
    overflow: hidden; 
}