猫头鹰旋转木马 2 响应式图像

Question

在这种情况下有一些主题，但经过尝试，没有成功。我正在尝试在猫头鹰轮播 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

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

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