Отзывчивое широкое изображение, чтобы соответствовать вертикально - Bootstrap

Question

Bootstrap 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% площади, сохранение соотношения сторон и обрезка при необходимости). Он требует cointainer с overflow:hidden. Вам также нужно добавить position:relative на контейнер, так как вы используете изображение с абсолютным положением.

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