Here is a simple test:

```
<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({

    });
});

```

You can see it at [jsfiddle](http://jsfiddle.net/bobu/jyzrdnfm/) too. [Here is the full image](http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg).

You can see that bxslider has slightly cut the image off at the man's feet. As far as I can tell in Firebug, it's due to the autogenerated `bx-viewport` div and its `border: 5px solid #fff` css. If I remove this in Firebug, the full image displays.

I'm not sure of any other solutions, so I tried to override this property by adding this to my own css file:

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

```

Which seems to solve the issue.

Why is the border in bxslider cutting the image?