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看到它。 Here is the full image

你可以看到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

bxslider略微切断了图像

2 个答案: