Owl Carousel 2 Responsive image

问题

There are some topics in this case, but after tried all way, no success. I am trying to make image responsive in owl carousel 2 plugin, I used responsive option in plugin option and I have control on number of item on desire resolution but in some resolution image not fit to parent height, the parent is view-ad-image and it has 250px height, and I want to to all resolution, images fit to this height.

What I tried so far:

.owl-carousel .owl-item img {
    display: block;
    height: 250px;
    min-width: 100%;
}

Result: images are stretched on some resolution, so not successfull.

.owl-carousel .owl-item img {
  display: block;
  height: 100%;
  width: 100%;
}

Result: Also not working. still image height not fit with parent.

I provide an example on jsfiddle because you can change window width (resolution) in there, but you can't here on StackOverflow snippet. so please for test, change result frame width to see the result.

Goal:

Fit all images to parent height, and you should not see red background, if you see, it means it not responsive and not fit.

JSFiddle

回答1:

The best you can do is:

.owl-carousel .owl-item img {
    display: block;
    height: 100%;
    width: auto;
    min-width: 100%;
}

Also Need something like @Manish answer:

.owl-stage-outer * {
     height:100%;
}

Demo

But I recommend you to use something like this, if you want to use this on device, you should keep parent responsive too.

#view-ad-image {
  width: 100%;
  height: 100%;
  max-height: 250px;
  overflow: hidden;
  background: red;
  position: relative;
}

JSFiddle

回答2:

This Should Work

.owl-stage-outer * {
     height:100%;
}

JSFiddle

回答3:

<div id="owl-example" class="owl-carousel">
  <div class="owl-slide">
        <div class="owl--text">
        This is a full height Owl slider. There is nothing else interesting here!</div>
    </div>
  <div class="owl-slide">
        <div class="owl--text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
    </div>
  <div class="owl-slide">
        <div class="owl--text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam excepturi voluptate eveniet consectetur numquam laboriosam.
        </div>
    </div>
</div>


.owl-carousel {
    position: relative;
    height: 100%;

    div:not(.owl-controls) {
        height: 100%;
    }

    .owl-slide {
        background-image: url('https://images.unsplash.com/photo-1437915015400-137312b61975?fit=crop&fm=jpg&h=800&q=80&w=1200');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    div.owl--text {
        position: absolute;
        bottom: 4em;
        left: 2em;
        width: 20em;
        height: 8em;
        padding: 1em;
        background: rgba(255, 255, 255, .5);
        border-radius: 4px;
    }

    .owl-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;

        .owl-buttons {
            div {
                position: absolute;
                top: 0;
                bottom: 0;
                display: inline-block;
                zoom: 1;
                margin: 0;
                width: 50px;
                height: 30px;
                line-height: 25px;
                text-align: center;
                font-size: .9em;
                border-radius: 3px;
                color: #FFF;
                background: #000;
                opacity: .6;
                text-transform: capitalize;
            }

            .owl-prev {
                left: 5px;
            }

            .owl-next {
                right: 5px;
            }
        }
    }
}


$(document).ready(function() {

  $("#owl-example").owlCarousel({
        navigation : true, 
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true,
            pagination: false,
        rewindSpeed: 500
    });

});

来源：https://stackoverflow.com/questions/49125314/owl-carousel-2-responsive-image

标签

jquery

css

owl-carousel-2