ブートストラップimg-responsiveが機能しない、画像がまだ画面より長いです。

Question

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 

    <div class="item col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 

    <div class="item col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 
</div> 

私は検索しようとしましたが、何も私の問題を解決しませんでした。私はdisplay：tableを使いたくないのですが、私は似たような質問を読んでいます。どんな助けも非常に高く評価されます。

Answer 1

問題を解決するために、あなたのCSSファイルに次の行を追加します。

.img-responsive{ width:100% !Important;} 

Answer 2

応答あなたのイメージを保つために、あなたより良い中古

img{ 
    max-width: 100% 
} 

このCSSがされているように思えるあなたのコメントどおりあなたのような

img, .container img.img-responsive{ 
    max-width: 100%; 
} 

の下にここにCSSの特異性を利用することができますので、この意志は、他のいくつかのCSSで上書きあなたの画面サイズの内側にあなたのimgを維持し、これは我々が次のように応答bootstrap.css内部

Answer 3

変更.img-responsiveを私たちの画像を維持するために使用される一般的な技術である：幅を追加するいくつかの理由

.img-responsive { 
    display: block; 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
} 

：100％ mixはimg-responsiveになります。 FirefoxやChromeでも動作します。

ともこれを試してみてください。

.item img { 
    width:100%; 
} 

Answer 4

は、あなたのイメージでwidthプロパティを設定します。

<img src="http://placehold.it/1920x1080" alt="Carousel image" class="img-responsive" width="100%" /> 

注：width="100%"はW3C有効ではありません。しかし、それはほとんどすべての近代的なまたは 古いブラウザで動作します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    </div> 
 
</div>

あなたはこれを試すことができます。

Answer 5

私は答えを見つけましたが、ここに投稿されたすべてのソリューションを試しましたが、 col-xs-12 col-md-10 col-md-offset-1が私のために働いたので、col-md -10 col-md-offset-1を私の前のマークアップに置き換えます。