小さな画面で画像の辺を切り取る

Question

私はブートストラップを使用しており、私のページの上部にはバナー（1920 * 250px）があります。 バナーは応答します（.img-responsiveを使用）。
小さな画面（smとxs）でも、バナーの幅が1140px（）になるように両面を切り取っています。基線の高さを250pxに保ちたい画像が1140のように振る舞いたい* 250ピクセルであり、それでもなお応答性があります）、どうすればいいのかわかりません。
私はどんな助けでも感謝します。

編集：
私は1920×250ピクセル大きさのバナーを持っている：は、ここで私が何をしたいのより良い説明です。このセクションには、ロゴを含むセクション（1140 * 250ピクセル）が含まれています。このセクションは常に完全に表示したいと考えています。http://i.imgur.com/kNBqEGD.jpg
画像は.img-responsiveで反応します。ウィンドウでサイズを変更します。しかし、小さな画面では、ロゴのある中央のセクションは本当に小さいので、私は装飾的な側面の部分を取り除きたい。残りの中央セクションは、ロゴが完全に見えるように応答する必要があります。メディアクエリで
http://i.imgur.com/RrEJgNt.jpg

Answer 1

、あなたは絶対に画像を配置し、元の高さを維持しながら水平方向に中央にleft: 50%; transform: translateX(-50%)を使用することができます。

.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

それが絶対的に配置することができるならば、あなたはCSSクリップ使用することができます（おそらくもっと賢明な解決策）

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

かをあなたが親コンテナに入れることができますオーバーフローを隠す：

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

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