猫头鹰传送带2响应图像 [英] Owl Carousel 2 Responsive image

问题描述

在这种情况下，有一些主题，但是在尝试所有方法后都没有成功.我试图在owl carousel 2插件中使图像响应，我在插件选项中使用了responsive选项，并且可以控制所需分辨率上的项目数，但是在某些分辨率下图像不适合父级高度，父级为view-ad-image它具有250px的高度，我想要所有分辨率的图像都适合这个高度.

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.

到目前为止我尝试过的事情:

.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代码段.因此请进行测试，更改结果框的宽度以查看结果.

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.

目标:

将所有图像调整为父级高度，并且您应该不会看到红色背景，如果看到的话，则意味着它没有响应并且不合适.

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

JSFiddle

推荐答案

您能做的最好的事情是:

The best you can do is:

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

还需要类似@Manish的答案:

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

JSFiddle

这篇关于猫头鹰传送带2响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！