Responsive Hintergrundbild - Bootstrap-Gitter - Bildlaufleiste Problem

Question

Ich möchte Vollbild-Hintergrundbild innerhalb eines Bootstrap-Grid erstellen, so dass es reagieren kann.

Ich habe eine Zeile erstellt und es auf 100% Höhe gebracht, damit es den gesamten Bildschirm passt.

Hinzugefügt ein 1024 * 768px Auflösung Bild, es erschien perfekt im Hintergrund, aber mit Bildlaufleisten.

Ich möchte nur die Bildlaufleisten loswerden, damit es in den Bildschirm passt. Hier ist mein html

html,body,.container-fluid{  
 
    height:100%;   
 
} 
 

 
.row{ 
 
    height:100%; 
 
} 
 
img { 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<div class="container-fluid"> 
 
    <div class="row" > 
 
    <img src="retail.jpg"> 
 
     <div class="col-md-12"> 
 
     </div> 
 
    </div> 
 
</div>

Kann mir jemand helfen?

Answer 1

Hier ist etwas. Das Bild ist Vollbild und der Inhalt ist unten.

Wenn Sie den Inhalt entfernen, wird die Bildlaufleiste nicht angezeigt.

Bootply: http://www.bootply.com/sFNwejI4ow

CSS:

html,body,.container-fluid{ 
    height:100%; 
} 

.full{ 
    height:100%; 
} 
img { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    width: 100%; 
    height: 100%; 
} 

HTML:

<div class="container-fluid"> 
    <div class="row full"> 
     <img src="//placehold.it/640x480"> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     Custom content 
     </div> 
    </div> 
</div> 

Answer 2

Diese standardmäßig sollte sowohl horizontale als auch vertikale Bildlaufleisten entfernen:

<style type="text/css"> 
body { 
    overflow:hidden; 
} 
</style> 

Leider deaktiviert dies auch Scrollen auf der Seite.

Alternativ können Sie Fancy Scrolling implementieren. Die Bildlaufleiste ist dünner, sieht auf der Seite besser aus und hat weiches Scrollen.

Versuchen Sie folgendes:

Hier ist das Skript: Link

Umsetzung:

Zunächst rufen Sie das Plugin auf einem Behälter.

<script> 
$(function() { 
$("#demo").customScroll(); 
}); 
</script> 

Hier ist die CSS:

.phancy-scrollbar { 
width: 5px; 
border-radius: 4px; 
top: 0; 
position: absolute; 
background: #ccc; 
-moz-transition: opacity .2s; 
-webkit-transition: opacity .2s; 
-o-transition: opacity .2s; 
-ms-transition: opacity .2s; 
transition: opacity .2s; 
-webkit-transition-delay: 1s; 
opacity: 0; 
} 
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar { 
opacity: 1; 
-webkit-transition-delay: 0s; 
} 
.phancy-scrollbarbutton { 
width: 100%; 
border-radius: 4px; 
top: 0; 
position: absolute; 
background-color: #999; 
} 

Hoffnung, das hilft. Prost!!

Answer 3

/* attributes overflow, background-size modified */  

html,body,.container-fluid{  
height:100%;  
overflow: hidden; // -> newly added 
} 

.row{ 
height:100%; 
} 
img { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain cover; // modified here 
    width: 100vw; 
    height: 100vh; 
} 

plunker demo