如何使图像填充滑块

Question

我正在开发一个网络应用程序，我使用 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选项，但图片仍未填充滑块。它在右端有一些空间。

Answer 1

更新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;
}

  

简而言之，您定位.bx-viewport而不是.bx-wrapper。所以在Snippet 3中，它与Snippet 2相同，但有一些例外：

1. 它装有bxslider.css

2. 有一个覆盖目标正确的选择器：

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

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

<强>更新

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

  

Snippet 1中的所有内容均适用，但以下规则集除外...

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

  

...如果有background-size: cover的背景图片，则应为background-size:contain。在该演示中，幻灯片1如前所述被改变。

基本上，将height: 100vh更改为height:auto并添加min-height，其值根据您的布局而变化，但使用绝对值。在某些情况下，min-height的内在和相对价值不能很好地锻炼（例如绝对值：200px，内在价值：20vh，相对值：20％）

  

以下规则集是您遇到问题的原因：

 /* 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;
*/

  

并且除非删除该规则集，否则不要使用bxslider.css样式表。

  

而不是<img>我在background-image使用<li>，而是使用background-size来确保每张图片都触及滑块的边缘。

  

我添加的其他风格是为了完善它的全屏（是一个单词？）。启用键盘箭头，禁用控件和寻呼机。它将通过鼠标拖动，触摸和箭头键移动。 AFAIK，您可以使用任意组合选项，它仍可以毫无问题地运行。

SNIPPET 1 - 全屏边缘

＆＃13;
＆＃13;
$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});
＆＃13;
*,
*::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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

SNIPPET 2 - Viewport Edge的顶部

＆＃13;
＆＃13;
$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});
＆＃13;
*,
*::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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

SNIPPET 3

＆＃13;
＆＃13;
$('.bx').bxSlider({
  keyboardEnabled: true,
  pager: false,
  controls: false
});
＆＃13;
*,
*::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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

更改jquery.bxslider.css文件或覆盖css（.bx-wrapper img）

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

试一试。

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

Answer 3

您必须覆盖bx-viewport

上的默认边框

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

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