画像は完全に反応しません

Question

私はブートストラップを使用しており、画像は1920x1280です。現在のところ、1000 pxの幅までしか応答せず、そこから縮小していません。幅が1000ピクセルを下回ると、画像の端が切り取られます。どのデバイスでも完全な画像が見えるようにする必要があります。私はCSSの背景URLを介して画像を追加しています。この周りに道がありますか？以下の関連コードを追加しました。画像はID「イントロ」内に配置されます。

画像

HTML

<div id="intro"> 
    <div class="intro-body"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <h1 style="color: #000000">Title<span class="brand-heading">Quote</span></h1> 
      <p style="color: #000000" class="intro-text">Short description</p> 
      <a href="#about" class="btn btn-default page-scroll">Learn More</a> </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

#intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: #fff; 
    background: url(../img/intro-bg.jpg) no-repeat center center fixed; 
    background-color: #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#intro .intro-body { 
    display: table-cell; 
    vertical-align: middle; 
} 
#intro .intro-body H1 { 
    font-size: 76px; 
    font-weight: 700; 
    color: rgba(255,255,255,0.8); 
    text-transform: uppercase; 
} 

@media(min-width:768px) { 
#intro { 
    height: 100%; 
    padding: 0; 
} 
#intro .intro-body .intro-text { 
    font-size: 18px; 
    letter-spacing: 1px; 
    margin-bottom: 100px; 
    color: rgba(255,255,255,0.9); 
} 
} 

Answer 1

IDイントロの代わりにこのスタイルを試してください。 2つの方法があります。 1つは高さと幅が固定され、もう1つは幅と高さがありません。

#intro{ 
     width: 100%; 
     height: 400px; 
     background-image: url('../img/intro-bg.jpg'); 
     background-size: 100% 100%; 
     border: 1px solid red; 
    } 

または

#intro{ 
background-image:url('../img/intro-bg.jpg'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 
} 

Answer 2

背景サイズ：カバー;背景のスペースをすべて埋めるようにしてください。カットオフなしで画像を完全に表示する場合、背景サイズ〜にはが含まれています。

background: url(../img/intro-bg.jpg) no-repeat right bottom scroll; 
background-color: #31f1fd; 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain;