css - 带有边距的 Owl Carousel 自动宽度不起作用

Question

我所有图片的高度都是固定的，并且需要在屏幕宽度变小时保持图片的比例。

#owl-demo .item img {
  display: block;
  width: auto;
  height: 300px
}

在我需要在图像之间留出边距之前，它工作正常。

#owl-demo .item {
   margin:0 10px 0 10px;
}

边距不会显示，图像并排静止。如果我将 width: 100%

margin 将显示

#owl-demo .item img {
  display: block;
  width: 100%;
  height: 300px
}

但随后图像不再成比例。

我试过Owl自己的demo，是这样的。如果您检查其中一张图片并使用 width: auto 将其更改为顶部的代码，您将看到边距不再有效。您还需要从 bootstrap 的 img 标签中删除 max-width: 100%。

http://owlgraphic.com/owlcarousel/demos/images.html

Answer 1

看起来您使用的是 1.3.X 版

尝试升级到版本 2，你会没事的。