如何使图像填充滑块

Question

我正在开发一个 Web 应用程序，我在其中使用 BXSlider 在页面顶部显示图像幻灯片。我遇到的问题是图像不适合滑块。它在图像周围显示白色边距。如何让图片填充银色？

编辑：

这是我的样式表：

.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);
}

我添加了 width: 100% 和 border: 0 选项，但图像仍然没有填满滑块。右端还有一些 space。

Answer 1

更改 jquery.bxslider.css 文件或覆盖 css (.bx-wrapper img)

.bx-wrapper img{
   width : 100%;
}

试一试。

它使用默认 css 覆盖。如果您正在链接任何其他 css，这可能就是原因。请向我们提供一些代码，以便我们更好更快地帮助您。

Answer 2

您必须覆盖 bx-viewport

上的默认边框

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

这应该会删除图像周围的白边。您可以在样式表中覆盖它而不是修改 jquery.bxslider.css.

Answer 3

更新 2

阅读评论后，我发现更改 bxslider.css 不是一个选项，您更愿意覆盖有问题的样式。我查看了样式表，发现您发布的样式与原始样式不同。你的是：

.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;
}

原文为：

.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:

加载了bxslider.css

有一个针对正确选择器的覆盖：

 /* Override */

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

box-shadow 不需要前缀，请参阅 caniuse。为了提高特异性，我将 class 加倍。如果 !important 就像使用大锤，那么双 class 就是圆头锤。

更新

我重新阅读了您的问题并注意到页面顶部有滑块，因此全屏在您的特定情况下无济于事，代码段 2 演示了 bxSlider 边缘样式。请以整页模式查看这两个片段。

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.

基本上，将 height: 100vh 更改为 height:auto 并添加 min-height，该值根据您的布局而变化，但使用绝对值。 min-height 在某些情况下（例如绝对值：200px，内在值：20vh，相对值：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.

片段 1 - 全屏边缘

$('.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 - 视口边缘顶部

$('.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>

片段 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>

如何使图像填充滑块

How to make image fill the slider

javascript

web

bxslider

responsive