CSS -猫头鹰旋转木马强制图像100%宽。

Question

这是我的密码：

​

$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
    loop:true,
    items:4,
    autoplay:true,
    autoplayTimeout:2000,
    autoplayHoverPause:true
    });
});

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

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img src='public/media/image/rabobank.webp' alt='' style='height: 122px !important;'/></div>
    <div class="item"><img src='public/media/image/sep.webp' alt='' style='height: 122px !important;'/></div>
    <div class="item"><img src='public/media/image/rotary.webp' alt='' style='height: 122px !important;'/></div>
    <div class="item"><img src='public/media/image/woordbeeld.webp' alt='' style='height: 122px !important;'/></div>
    <div class="item"><img src='public/media/image/kiwanis.webp' alt='' style='height: 60px !important; margin-bottom: 2% !important;'/></div>
    <div class="item"><img src='public/media/image/-.webp' alt='' style='height: 122px !important;'/></div>
    <div class="item"><img src='public/media/image/dj.webp' alt='' style='height: 122px !important;'/></div>
</div>
<script src="<?= $this->getThemeURL(); ?>Assets/Js/owl.carousel.min.js"></script>

​

我将包括一张图片，看看这里是什么样子，->。图像，很明显，这不应该是这样的。我如何设置它，使它使用图像的基本高度和宽度值？

Answer 1

我会试着把照片上的样式标签去掉。

然后将css样式更改为：

#owl-demo .item img {
    display: block;
    width: 100%;
    max-width: change to actual photo width;
    height: auto;
}

我也会在旋转木马上放一个最大宽度来阻止它比你想要的长得多。