Owl 轮播 2 响应式图片

Question

本例中有一些题目，但是试了各种方法都没有成功。我试图在 owl carousel 2 插件中使图像响应，我在插件选项中使用了 responsive 选项并且我可以控制所需分辨率的项目数量但在某些分辨率图像中不适合 parent 高度，parent 是 view-ad-image 并且它有 250px 高度，我想要所有分辨率，图像适合这个高度。

到目前为止我尝试了什么：

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

结果：图像在某些分辨率下被拉伸，因此不成功。

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

结果：同样无效。静止图像高度不适合 parent.

我在 jsfiddle 上提供了一个示例，因为您可以在其中更改 window 宽度（分辨率），但您不能在 Whosebug 代码段上更改。所以请进行测试，更改结果帧宽度以查看结果。

目标：

将所有图像调整到 parent 高度，您不应看到红色背景，如果看到，则表示它没有响应且不适合。

JSFiddle

Answer 1

这应该可行

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

JSFiddle

Answer 2

你能做的最好的是：

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

还需要类似@Manish 的回答：

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

Demo

但我建议你使用这样的东西，如果你想在设备上使用它，你也应该让家长响应。

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

JSFiddle

Answer 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
    });

});

Owl 轮播 2 响应式图片

Owl Carousel 2 Responsive image

css

jquery

owl-carousel-2