html - 在 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%;
}