ブートストラップカルーセル画像を反応させるには？

Question

画像の比率を同じにしたい。問題は、ブラウザが広くなっているときにぎこちなくなることです。 と縮小されたときに鳴ります。

私はここですべての質問をチェックしましたが、ほとんどが私を助けませんでした。ここで

がマークアップです：

<!-- Carousel 
================================================== --> 
<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> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/female/IMG_5053-2.jpg" 
      data-src="images/female/IMG_5053-2.jpg" alt="First slide"> 

---

、ここでCSSが

.carousel .item>img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 100%; 
} 

である私はjsfiddleを作ってみましたが、私はここのcouldntへのリンクですページhttp://maanastore.com/home.php

Answer 1

それぞれのファイルから、次のCSSルールを削除します。また、home.phpファイルで

carousel.css

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

で

.carousel .item>img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-width: 100%; 
    height: 100%; 
} 

をcarousel.cssファイルにmargin-top: 51px;.carouselにクラスを追加し、 navbarを固定しているので、同じクラスからheight:500pxを削除してください。

Answer 2

以下を削除することをお勧めします。

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

と.carousel削除中：

height: 500px; 

と .carousel .itemで、これはイメージが、私はそれが望んでいたように動作しますが、可能作られた私のため

height: 500px; 

を削除あなたのローカルに作業している場合は、最初にあなたのhtmlの画像を挿入するか、それはちょうど無駄に崩壊すると思う。

編集：別のユーザーが、私はこれが
イメージはどちらかの側に、あるいは片側にグレーのバーが表示されている場合、私は維持をお勧めしたいことに注意してください追加提案

.carousel-inner > .item > img { 
    min-width: 100%; 
} 

Answer 3

することができますイメージを中央に配置した結果を改善するために、通常はマージンを使用してください。その後、内側のdivを追加したものを私がやってしまった

.carousel-inner > .carousel-item > img { 
margin: 0; //If you have images of very different sizes.  
max-width: 100%; } 

Answer 4

は応答

<div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <div class="img1"> 
     </div> 
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">--> 
    </div> 
</div> 


<style> 
    .carousel-inner { 
    height: 100vh; 
    <! -- custom hight --> 
    } 

    .carousel-item { 
    height: 100%; 
    } 

    .img1 { 
    background-image: url('../images/home/bng_00.jpg'); 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-attachment: fixed !important; 
    background-size: cover !important; 
    background-position: center !important; 
    } 
</style>