Question

我正在研究WordPress主题。最初它的引导程序模板已创建。目前我在其推荐部分的滑块中存在问题。

我正在使用Owl Carousel来创建滑块。我在div文件的index.php中包含了以下短代码：

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

滑块包含客户端给出的声明，其中客户端的图像位于圆圈的底部。对于图像，我的CSS看起来像：

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

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

Answer 1

您必须为img标记指定width和height属性。此外，需要 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;