柔性滑块图像未居中

Flex Slider Image not Centered

本文关键字：图像      更新时间：2023-09-26

我在使用flexlider时遇到了一些问题。我网站上滑块的图像不是以为中心的

http://reart.armah.net/

我发现我的滑块也没有响应。

<div class="flexslider">
        <ul class="slides">
            <li style="background-image:url({{media url="wysiwyg/slider-1/img1palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
            <li style="background-image:url({{media url="wysiwyg/slider-1/img2palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
        </ul>
    </div>

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; list-style:none !important;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}

您正在使用Bootstrap吗？如果是这样的话，你可以把它放在这样的容器里：

<div class="flexslider">
    <div class="container">
        <ul class="slides">
            <li style="background-image:url({{media url="wysiwyg/slider-1/img1palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
            <li style="background-image:url({{media url="wysiwyg/slider-1/img2palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
        </ul>
    </div>
</div>

如果您没有使用引导程序，您是否尝试将图像设置为max-width:100%;？

相关文章：