How to make image fill the slider

Question

I am developing a web app where I used BXSlider to show an image slide show on top of the page. The problem I have is the images does not fit into the slider. It shows white margins around the images. How to make the image fill the silder ?

Edit:

Here is my stylesheet:

.bx-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  *zoom: 1;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
  width: 100%;
}
.bx-wrapper .bx-viewport {
  -moz-box-shadow: 0 0 0 #ccc;
  -webkit-box-shadow: 0 0 0 #ccc;
  box-shadow: 0 0 0 #ccc;
  border: 0;
  left: -40px;
  background: #fff;
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
}

I've added width: 100% and border: 0 options, but still the image does not fill the slider. It has some space left in the right end.

Answer 1

UPDATE 2

After reading comments I found out that changing bxslider.css isn't an option and that you'd prefer to override the offending style. I looked at the stylesheet and saw that the style you had posted was different than the original. Yours is:

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 0 #ccc;
    -webkit-box-shadow: 0 0 0 #ccc;
    box-shadow: 0 0 0 #ccc;
    border:  0;
    left: -40px;
    background: #fff;
}

The original is:

.bx-wrapper {
   -moz-box-shadow: 0 0 5px #ccc;
   -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    background: #fff;
}

In short you targeted .bx-viewport instead of .bx-wrapper. So in Snippet 3, it is identical to Snippet 2 with some exceptions:

1. It's loaded with bxslider.css

2. There is an override targeting the correct selector:

    /* Override */
   
   .bx-wrapper.bx-wrapper {
     box-shadow: 0 0 0 transparent;
     border: 0 none transparent;
     background: none;
    }
   

box-shadow doesn't require prefixes see caniuse. I doubled up on the class in order to increase specificity. If !important is like using a sledgehammer then double class is a ball peen hammer.

---

UPDATE

I reread your question and noticed you have the slider at the top of the page, so full screen isn't going to help in your particular situation, Snippet 2 demonstrates bxSlider edge style. Please review both Snippets in Full page mode.

Everything from Snippet 1 applies with the exception of the following ruleset...

.bx-wrapper li {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: table;
}

...and if there any background images that have background-size: cover, it should be background-size:contain. In this demonstration slide 1 was altered as previously explained.

Basically, change height: 100vh to height:auto and add min-height which the value varies according to your layout but use an absolute value. Intrinsic and relative values don't workout very well with min-height under certain circumstances (e.g. absolute value: 200px, intrinsic value: 20vh, relative value: 20%)

---

The following ruleset is the reason why you are having trouble:

 /* REMOVE THIS RULESET
.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 0 #ccc;
    -webkit-box-shadow: 0 0 0 #ccc;
    box-shadow: 0 0 0 #ccc;
    border:  0;
    left: -40px;
    background: #fff;
*/

and do not use the bxslider.css stylesheet unless you remove that ruleset.

---

Instead of <img> I used background-image on each <li> then used background-size to insure that every image touches the edges of the slider.

---

The rest of the styles I added to perfect it's fullscreenness (is that a word?). Keyboard arrows are enabled, the controls and pager disabled. It will move with mouse drag, touch, and arrow keys. AFAIK, you can use any combination of options and it'll still run without any problems.

SNIPPET 1 - Full Screen Edge

$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
  outline: 0 none transparent;
}
html,
body {
  height: 100%;
  width: 100%;
}
.bx-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
.bx-viewport {
  position: absolute;
  -webkit-transform: translatez(0);
  transform: translatez(0);
  left: 0;
}
.bx-wrapper li {
  width: 100%;
  height: 100vh;
  display: table;
}

<main class='bx-box'>

  <ul class='bx'>
    <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:cover;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'>

    </li>

  </ul>

</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

SNIPPET 2 - Top of Viewport Edge

$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
  outline: 0 none transparent;
}
html,
body {
  height: 100%;
  width: 100%;
}
.bx-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
.bx-viewport {
  position: absolute;
  -webkit-transform: translatez(0);
  transform: translatez(0);
  left: 0;
}
.bx-wrapper li {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: table;
}

<main class='bx-box'>

  <ul class='bx'>
    <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:contain;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'>

    </li>

  </ul>

</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

SNIPPET 3

$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
  outline: 0 none transparent;
}
html,
body {
  height: 100%;
  width: 100%;
}
.bx-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
.bx-viewport {
  position: absolute;
  -webkit-transform: translatez(0);
  transform: translatez(0);
  left: 0;
}
.bx-wrapper li {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: table;
}
/* Override */

.bx-wrapper.bx-wrapper {
  box-shadow: 0 0 0 tramsparent;
  border: 0 none transparent;
  background: none;
}

<link href='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>
<main class='bx-box'>

  <ul class='bx'>
    <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:contain;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'>

    </li>
    <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'>

    </li>

  </ul>

</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>