Owl Carousel 中的图像大小问题答案

【问题标题】：Image size issue in Owl CarouselOwl Carousel 中的图像大小问题
【发布时间】：2016-03-20 05:27:24
【问题描述】：

我正在开发一个 WordPress 主题。最初，它的引导模板已创建。目前我在推荐部分的滑块中有一个问题。

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

<?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"。一直无法获得所需的图像尺寸。如何将图像包含到所需的尺寸？

【问题讨论】：

【解决方案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;

【讨论】：