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片段中更改它。因此，请将结果框架宽度更改为进行测试。

目标：

将所有图像调整为与父容器高度相适应，并且您不应该看到红色背景，如果看到，则表示它不具有响应性并且不适合。

JSFiddle

- Jack The Baker

Answer 1

你最好做的是：

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

也需要像@Manish的回答一样的东西：

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

演示

但是我建议您使用类似于这样的东西，如果您想在设备上使用它，那么您应该保持父级响应。

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

JSFiddle

- Pedram

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

});

- Mayur Baldha

---

background-repeat: no-repeat; background-size: cover; background-position: center; 修复了我的问题。 - Alp Altunel

Answer 3

这应该可以工作

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

{{链接1：JSFiddle}}

- Manish