Dikey olarak sığacak kadar geniş görüntü - Bootstrap

Question

Bootstrap carousel ürün bir mobil aygıtın dikey ekranına sığabilir. ama benim resim genişliğinde ve onlar bu kodla mobil iyi ölçeklendirme olmaz:

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

nasıl CSS kullanabilirsiniz mobil dikey görünüm için resmin sadece bir kısmını göster (orta/sol/sağ - bu visual example gibi)?

Answer 1

En iyi otomatik sığdırma ayarına sahip olmak için object-fit:cover kullanın (% 100 alan doldurma, en/boy oranını koruyarak/gerekli olduğunda kırparak). overflow:hidden ile bir bozuk para istiyor. Mutlak konumlu bir görüntü kullandığınızdan, kapsayıcıya position:relative eklemeniz de gerekecektir.

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