Owl Carousel 2 响应式图片

Question

这个案例有一些题目，但经过各种尝试，都没有成功。我正在尝试在 owl carousel 2 插件中使图像响应，我在插件选项中使用了responsive 选项，并且我可以控制所需分辨率的项目数量，但在某些不适合父高度的分辨率图像中，父是 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%;
}

结果：也不起作用。静止图像高度不适合父级。

我在 jsfiddle 上提供了一个示例，因为您可以在其中更改窗口宽度（分辨率），但您不能在 StackOverflow sn-p 上进行更改。所以请进行测试，更改结果帧宽度以查看结果。

目标：

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

JSFiddle

Answer 1

你能做的最好的就是：

.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 2

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

});

Answer 3

这应该工作

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

JSFiddle