2017-03-08 18 views
1

私はブートストラップカルーセルでimgを反応させようとしています。私はCSSの高さと幅を変更しようとしましたが、うまくいきません。 高さを100vh、幅をimgの幅としたい。オーバーフロー部分は隠すことができますが、imgはスケーリングする必要があります。今のところ、画面が小さくなるとこのように見えます。 enter image description hereブートストラップ応答カルーセル画像

ここにコードがあります。

@media only screen and (max-width : 768px) { 
 
     .carousel-inner > .item > img { 
 
       height: 100vh; 
 
       width: auto; 
 
       overflow: hidden; 
 
     } 
 
}
<div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
    </div> 
 
</div> 
 
              

答えて

0

あなただけの高さがビューポートにフィットさを懸念している場合は、ちょうど高さを設定していない幅とそれが正常に動作します。

このコードは@mediaというクエリにラップされていることに注意してください。これらのスタイルは、クエリ条件が満たされた場合にのみ適用されることを意味します。

.carousel-inner > .item > img { 
 
       height: 100vh; 
 
       //width: auto; 
 
       overflow: hidden; 
 
     }
<div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="https://images.unsplash.com/photo-1487772841463-eb1f383a9e67?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="xmas_orchestra"> 
 
    </div> 
 
</div>

+0

私が試みたが、IMGはまだ圧迫されます –

関連する問題