bxslider略微切断了图像

Question

这是一个简单的测试：

<ul class="bxslider">
    <li>
        <img src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" alt="">

    </li>
</ul>

JavaScript的：

$(document).ready(function() {
    $('.bxslider').bxSlider({

    });
});

你也可以在jsfiddle看到它。 这是完整的图像 。

你可以看到bxslider在男人的脚上略微削减了图像。 据我所知，在Firebug中，这是由于自动生成的bx-viewport div及其border: 5px solid #fff css。 如果我在Firebug中删除它，则会显示完整图像。

我不确定任何其他解决方案，所以我尝试通过将此属性添加到我自己的css文件来覆盖此属性：

.bx-wrapper bx-viewport {
    border: none;
}

这似乎解决了这个问题。

为什么bxslider中的边框会切割图像？

Answer 1

实际上，修复非常简单。 bxSlider不包含包装器的ul类，所以你必须添加：

.bxslider {
    list-style:none;
    margin:0;
    padding:0
}

这是固定的。

Answer 2

尝试添加

ul.bxslider {
  margin: 0;
}

链接： jsfiddle