css - 猫头鹰轮播中的图像大小问题

Question

我正在研究 WordPress 主题。最初它的 Bootstrap 模板已经创建。目前，我在推荐部分的 slider 中遇到了问题。

我正在使用 Owl Carousel 来创建 slider 。我在 index.php 文件的 div 中包含了以下简码:

<?php
    echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>

slider 包含客户给出的陈述，客户的图像在底部的圆圈中。对于图像，我的 CSS 如下所示:

.img-circle {
  margin-top: 20px;
  height: auto;
  width: 100px;
 }

虽然已经指定了图像的宽度，但图像占据了它所属的 div 的整个宽度。我只想在一张幻灯片中显示一个客户端，所以我在短代码中使用了 singleItem="true"。一直无法获得所需的图像尺寸。如何将图像包含到所需尺寸？

Answer 1

您必须为 img 标记提供宽度和高度属性。此外，它需要 display: block 才能忽略 owl-carousel 的 100% 宽度。

你也可以在它周围包含一个包装器，这样效果会更好。

CSS

.wrapper-circle {
    width: 100px;
    height: 100px;
}

HTML

<div class="wrapper-circle">
    <img src="" alt="">
</div>

如果您无法编辑 HTML，请尝试将 CSS 应用于您的 img 标签:

display: block;
width: 50px;
height: auto;

查看更多详细信息:http://owlgraphic.com/owlcarousel/demos/one.html