Bild nicht vollständig reagiert

Question

Ich benutze Bootstrap und habe ein Bild 1920x1280. Es reagiert derzeit nur bis zu einer Breite von 1000 px und hört von dort aus auf zu schrumpfen. Breite unter 1000 px, beginnt die Seite des Bildes zu schneiden. Ich brauche das volle Bild, um auf jedem Gerät sichtbar zu sein. Ich füge das Bild über die CSS-Hintergrund-URL hinzu. Gibt es einen Weg dahin? Hinzugefügt den relevanten Code unten. Das Bild wird in die ID 'Intro' eingefügt.

Bild

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

Bitte versuchen Sie diesen Style anstelle Ihres ID-Intro. Es gibt zwei Methoden. Einer ist mit fester Höhe und Breite, der andere ist ohne Breite und Höhe.

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

oder

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

Answer 2

Hintergrund-size: Abdeckung; versuchen Sie, den gesamten Hintergrund zu füllen, also vielleicht die abgeschnittene Kante des Bildes. Wenn Sie das Bild vollständig ohne Abschneiden anzeigen, geben Sie Hintergrundgröße bis enthalten.

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;