Bootstrap3：固定Hightの応答画像は、ズームインする必要があります。

Question

私のウェブサイトに対応するヘッダを作りたいと思います。明らかに私はブートストラップ.img-responsiveクラスを使用しました。私の問題は、画面が大きくなると、height: autoのために高さも上がります。
したがって、通常のデスクトップ画面では画像が大きすぎます。私は画像の幅が100％で、高さが固定されているウェブサイトを見たことがあります。幅が変更された場合、画像はズームインまたはパンします。ここには私が意味するもののexampleがあります。
私はそのオンライン上のリソースを検索しましたが、何も見つかりませんでした。あなたの誰かが私を助けることができますか？

ありがとうございます！

Answer 1

あなたが同じ高さを維持しながら、画像を画面サイズに応じて拡大縮小したい場合は、定義された高さの要素にbackground-imageプロパティを使用し、上記の私のコメントに拡大：

.hero { 
 
    width:100%; 
 
    height:300px; 
 
    background-image:url('https://placeimg.com/1000/450/nature'); 
 
    background-size:cover; 
 
}

<div class="hero"></div>

あなたは画像をトリミングする場合に満足していないなら、あなたはそれを調整するためにbackground-positionを使用することができます。

.hero { 
 
    width:100%; 
 
    height:300px; 
 
    background-image:url('https://placeimg.com/1000/450/nature'); 
 
    background-position:center center; 
 
    background-size:cover; 
 
}

<div class="hero"></div>