垂直にフィットするワイドなイメージ - ブートストラップ

Question

ブートストラップcarouselは、モバイルデバイスの垂直画面に適合することができます。しかし、私のイメージは広いですし、彼らはこのコードで携帯にうまくスケールしません。

HTML：

<div class="item"> 
    <img class="First-slide" src="images/bg01.jpg" alt="First slide"> 

</div> 

CSS：

.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    height: 500px; 
} 

どのように私はCSSを使用することができますモバイル垂直ビューの画像の一部（中/左/右 - このようなvisual example）のみを表示しますか？

Answer 1

object-fit:coverを使用して、最適なオートフィット調整（100％のエリア塗りつぶし、アスペクト比の維持、および必要に応じてトリミング）を使用します。それはoverflow:hiddenとcointainerを要求する。また、絶対位置の画像を使用しているため、容器にposition:relativeを追加する必要があります。

.carousel .item { 
    height: 500px; 
    background-color: #777; 
    object-fit: cover; 
    overflow: hidden; 
    position: relative; 
}