Centre Bootstrap Carousel Bilder bei Fenstergröße

Question

Ich habe viele ähnliche Fragen gesehen, aber die Lösungen nicht anwendbar.

Ich versuche, ein Bootstrap-Karussell so zu machen, dass, wenn das Fenster in der Größe geändert wird, das Bild zentriert bleibt, während auch die erforderliche Bildhöhe und minimale 100% Breite Eigenschaften beibehalten werden.

Dies ist ein wenig schwer zu erklären, aber Sie können ein ähnliches Konzept siehe http://www.lyft.com

ich auf codepen ein ähnliches Problem repliziert wurden, die Sie sehen können, dass, wenn Sie das Fenster bis auf die Größe eines schrumpfen Mobiles Gerät bleibt das Bild fixiert und Sie sehen schließlich in der oberen linken Ecke des Bildes (in der Regel Wolken oder eine nicht erkennbare Unschärfe).

Ich versuche, dieses Bild nach links zu bewegen und zentriert zu bleiben, da die horizontale Ansicht schrumpft, so dass das Bild relevant bleibt.

Meine zusätzliches Karussell Stile:

/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
    overflow: hidden; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: relative; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    max-width: none; 
    height: auto; 
} 
.carousel-inner img{ 
    margin: auto; 
} 

#mycarousel{ 
    position: relative; 
    top: 0; 
} 

Und das einfache Karussell:

<div id="mycarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#mycarousel" data-slide-to="1"></li> 
    <li data-target="#mycarousel" data-slide-to="2"></li> 
    <li data-target="#mycarousel" data-slide-to="3"></li> 
    <li data-target="#mycarousel" data-slide-to="4"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"> 
    </div> 
    <div class="item"> 
     <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"> 
    </div> 
    <div class="item"> 
     <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"> 
    </div> 
    <div class="item"> 
     <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"> 
    </div> 
    <div class="item"> 
     <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"> 
    </div> 
    </div> 
</div> 

Answer 1

ich eine Lösung auf der lyft Website, die Sie in Ihrem Beitrag nachverfolgen basiert. Ich habe deine in div verwandelt und ein Hintergrundbild verwendet, das dann entsprechend formatiert wurde.

<div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div> 
    </div> 
    <div class="item"> 
     <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div> 
    </div> 
    <div class="item"> 
     <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div> 
    </div> 
    <div class="item"> 
     <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div> 
    </div> 
    <div class="item"> 
     <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div> 
    </div> 

Dann entfernt diese .carousel-inner > .item > img und hinzugefügt, um diese CSS:

.carousel-inner .item .item-child { 
    background-position: top center; 
    background-size: cover; 
    position: absolute; 
    bottom:0; 
    top: 0; 
    left: 0; 
    right:0; 
    width: 100%; 
    height: auto; 
} 

Sie can see the js.fiddle here wenn Sie mit ihm spielen, um möchten. Ich hoffe, das hilft.

Answer 2

Dort gehen Sie, einfachste Lösung

statt min-width Verwendung Breite auf Bilder

.carousel-inner > .item > img { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    max-width: none; 
    height: auto; 
} 

auch in einer Höhenverstellung für Karussell werfen wie diese

.carousel .item { 
    height: auto; 
    background-color: #777; 
} 

http://codepen.io/Rohithzr/pen/WwEpgp?editors=1100