Center middle part of image within div

Question

The image is wider than the surrounding div. This is for mobil units. The image within the div has width:auto; and the div holding it is as wide as the visible area. So if the div is 500px the image might vary having 1000px or so. But I want to show the middle part of image only.

Im using an old version of 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>

Thanks!

FIXED with the following:

#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 */
}

Please include your CSS and JS as well, so we can reproduce your issue. — showdev, Feb 07 '18 at 18:19
Possible duplicate of [Center a large image of unknown size inside a smaller div with overflow hidden](https://stackoverflow.com/questions/19673895/center-a-large-image-of-unknown-size-inside-a-smaller-div-with-overflow-hidden)? [Working example](https://jsfiddle.net/fsgd9n87/). — showdev, Feb 07 '18 at 18:28

LPZadkiel · Answer 1 · 2018-02-07T19:38:01.883

0

try this for img middle

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

PD: if you want, this code should fit the image on the div

.item > img{
    width: 100%;
}

edited Feb 07 '18 at 19:38

answered Feb 07 '18 at 18:29

LPZadkiel

561
1
3
16

1

That kind of works, but now the image is squeezed to fit the width. I do not want this, I wish to get it only centered showing only the middle horizontal part of image. – Amc Feb 07 '18 at 18:49
the second code was just if you wanted to made the image fit the container, the first code should solve your problem – LPZadkiel Feb 07 '18 at 19:37

Center middle part of image within div

1 Answers1