响应广角图像，以垂直适合 - 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％区域填充，保持纵横比和裁剪当/如果必要）。它要求与overflow:hidden一个cointainer。您还需要在容器上添加position:relative，因为您使用的是具有绝对位置的图像。

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