中央のブートストラップウィンドウのサイズが変更されたときのカルーセル画像

Question

多くの同様の質問がありましたが、解決策は適用されませんでした。

私は、ウィンドウのサイズが変更されたときに画像が中央に残り、必要な画像の高さと最小100％の幅のプロパティを維持するように、ブートストラップカルーセルを作ろうとしています。

これは説明するのは少し難しいですが、あなたはの大きさにまで、ウィンドウを縮小した場合ので、あなたが見ることができる私はcodepen上で同様の問題を複製しているhttp://www.lyft.com

に同様の概念を見ることができますモバイルデバイスでは、画像は固定されたままで、最終的に画像の左上隅（通常は雲または認識できないぼかし）を見ています。

私は、この画像を左に動かして、画像が関連するままになるように、横向きのビューが縮小するにつれて中央に留まろうとしています。

私の追加のカルーセルスタイル：

/* 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; 
} 

とシンプルなカルーセル：あり

<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

のようなカルーセルのための高さ調整に投げる私はあなたのポストにリンクされlyftサイトに基づいたソリューションを作りました。私はあなたのimgをdivに変え、背景イメージを使用して適切にスタイルを設定しました。

<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> 

は、この.carousel-inner > .item > imgを削除し、この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; 
} 

あなたcan see the js.fiddle hereあなたはそれで遊んしたい場合。希望が役立ちます。

Answer 2

は、あなたが行くには、最も簡単ではなく、画像上の最小幅使用幅の

を修正

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

また、この

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

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