ブートストラップで応答幅の広い画像を取得する

Question

すべてのデバイスでヘッダ画像を全幅にすることに問題がありました。バックグラウンドサイズを100％に変更してこれを修正しました。画像の上部と下部に黒いバーが表示され、画像からコンテンツが分離されます。これを解決する最善の方法は何ですか？

//Color Pallette 
$backgroundWhite: #d1d1d1 
$spectrumRed: #a10019 
$darkestGrey: #2f2f2f 
$darkGrey: #252525 
$grey: #6e6e6e 

//Fonts 
$raleway: 'Raleway', sans-serif 
html,body 
    overflow-x: hidden 
    height: 100% 
    margin: 0 
    padding: 0 

li 
    font-family: $raleway 
.container-fluid 
    background-color: #333 
    border-bottom: 4px solid $spectrumRed 
#navbarItem:hover 
    color: $backgroundWhite 
#active 
    background-color: $spectrumRed 
    color: $backgroundWhite 

.wide (THIS IS THE IMAGE CONTAINER DIV) 
    margin-top: -60px 
    background: #000 url("/img/9114.jpg") center center 
    background-size: 100% 
    background-repeat: no-repeat 
    width: 100% 
    height: 80% 
    display: inline-block 

#modelName 
    background-color: $darkGrey 
    color: $backgroundWhite 
    width: 100% 
    margin-top: -35px 
    display: inline-block 
    border-bottom: 10px solid $spectrumRed 
#modelName h1 
    font-family: $raleway 
    font-weight: 600 

そして、私の問題のスクリーンショット：

は、ここに私のCSSです

Answer 1

:)はここで修正だ問題ないはずです。 divの高さを0に設定し、divのpadding-topを画像の縦横比に設定します。それはちょうど画像の高さ/画像の幅です。私の個人的には1920/1000の画像で52.08％になりました。

Answer 2

あなたは、プロパティを使用する必要があります。

background-size: cover; 
height: 100vh; 
width: 100vw; 

はあなたの100％完全に対応する画像を達成するために。あなたはいつもにあなたの背景のサイズを変更することができます：タブレットやモバイル用

background-size: content 

が、デスクトップのために