Question

我正在使用owl carousel 2，我的问题是我正在寻找一种解决方案，以便在用户根据graphist的设计调整浏览器窗口（响应性）时保持图像的宽高比。

这使得开发更加困难，每个项目都是一个旋转木马包括3张图片，
我在Scss中使用这个函数来制作我的图像16：9：

Map<String,Object>

这不是非常互动并且总是返回图像的静态大小（虽然我已经以不同的比例编写了媒体查询，但它仍然不是很稳定）

这是我的轮播初始代码：

@function aspect($width) {
    @return $width * 9 / 16;
}

我的HTML代码是：

 $('.owl-carousel').owlCarousel({
        nav: false,
        dots: true,
        items: 1,
        center: true,
        //autoWidth: true,
        loop: true,
    });

有什么解决方案我可以通过owl carousel 2制作响应式图像吗？

非常感谢

Answer 1

我找到了解决方案，我将这些样式添加到我的Scss文件中：

.outer {
position: relative;

&:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
}

> .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}
}

然后我改变了我的Html：

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
    <a href="@Url.Action("Video", "Service")">
        <div class="owl-carousel owl-theme">
            <div class="item outer">
                <img src="@service.serviceThumbpath" alt="@service.serviceName" title="@service.serviceName" class="inner"/>
            </div>
            @foreach (var thumb in videoThumbpath)
            {
                <div class="item outer">
                    <img src="@thumb" alt="@serviceName" title="@serviceName"  class="inner"/>
                </div>

            }
        </div>
        <h5> @service.serviceName</h5>
        <div class="details">
            @{
                _serviceRate = float.Parse(service.serviceRate);
            }
            <p class="pull-left">@service.VideoCount </p>

        </div>
    </a>
</div>

它与owl carousel 2保持16：9的宽高比：）

对于页面的网格系统，我使用了This CodePen，这对我的自定义尺寸非常有帮助。

Answer 2

我将高度和宽度设置如下：

.owl-carousel {
  height: 100%;
  overflow: hidden;
}

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

jQuery的：

owl.owlCarousel({
    items:3,
    autoWidth: true,
});

Answer 3

这样的事情应该有效。向容器添加固定的width。然后使用img css，它应保持其宽高比，就像你的方面一样。

.item {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="item">
  <img width="400" height="400" src="@service.serviceThumbpath" alt="@service.serviceName" title="@service.serviceName" />
</div>

举个例子，您可以使用自己的宽度和高度。也可以仅在特定.item查询时添加@media宽度。

猫头鹰旋转木马2张图像，宽高比为16：9（响应）

3 个答案: