div中图像的中心中间部分

Question

图像比周围的div宽。这是针对美孚公司的。div中的图像具有宽度：auto；持有它的div与可见区域一样宽。因此，如果div为500px，则图像可能会变化，约为1000px。但我只想显示图像的中间部分。

Im使用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 middle

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

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

.item > img{
    width: 100%;
}