在 div 中居中图像的中间部分

Question

图像比周围的 div 宽。 这是针对移动单位的。 div内的图片 有宽度：自动；和持有它的 div 一样宽 作为可见区域。所以如果 div 是 500px 图像可能会有所不同，有 1000 像素左右。但我想要 只显示图像的中间部分。

我使用的是旧版本的 OWL Carousel v1.3.3

   <div id="custom-owl-slider" class="owl-slide" data-scroll-speed="2">
                <div class="item">
                    <img src="images/slider/IMG_3455.png" alt="">
                </div>
                 <div class="item">
                    <img src="images/slider/IMG_771.JPG" alt="">
                </div>
                <div class="item">
                    <img src="images/slider/IMG_321.JPG" alt="">
                </div>
                <div class="item">
                    <img src="images/slider/IMG_344.jpeg" alt="">
                </div>  
                <div class="item">
                    <img src="images/slider/IMG_563.jpeg" alt="">
                </div>   
                <div class="item">
                    <img src="images/slider/IMG_135.jpeg" alt="">
                </div>
            </div>

谢谢！

修复了以下内容：

#custom-owl-slider .owl-item  {
    display: flex !important;
    justify-content: center !important;
    height: auto; /* or other desired height */
    overflow: hidden !important;
}

#custom-owl-slider .owl-item img {
    flex: none !important; /* keep aspect ratio */
}

Answer 1

在 img 中间试试这个

.item > img {
    text-align: center;
    overflow: hidden;
}

PD：如果你愿意，这段代码应该适合 div 上的图像

.item > img{
    width: 100%;
}