Javascript 如何使图像填充滑块

我正在开发一个web应用程序，我使用BXSlider在页面顶部显示一个图像幻灯片。我的问题是图像不适合滑块。它显示图像周围的白色边距。如何使图像填满屏幕

编辑：

这是我的样式表：

.bx包装器{
位置：相对位置；
保证金：0；
填充：0；
*缩放：1；
}
.bx包装器img{
最大宽度：100%；
显示：块；
宽度：100%；
}
.bx包装器.bx视口{
-moz盒阴影：0#ccc；
-webkit盒阴影：0#ccc；
盒影：0#ccc；
边界：0；
左：-40px；
背景：#fff；
/*修复移动页面上的其他元素（在Chrome上）*/
-webkit转换：translatez（0）；
-moz变换：translatez（0）；
-ms变换：translatez（0）；
-o变换：translatez（0）；
变换：translatez（0）；
}

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

试试看

它使用默认的css覆盖。

---

如果您正在链接任何其他css，这可能是原因。请为我们提供一些代码，以便我们能够更好更快地帮助您

必须覆盖bx视口上的默认边框

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

---

这将删除图像周围的白色边距。您只需在样式表中覆盖它，而无需修改jquery.bxslider.css。

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

。因此，在代码段3中，它与代码段2相同，但有一些例外：

它加载了bxslider.css

存在针对正确选择器的覆盖：

 /* Override */

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

box shadow

不需要前缀，请参见。为了增加特殊性，我在课堂上加倍努力。如果

！重要信息

就像使用大锤一样，然后双级是球锤

---

更新

我重读了您的问题，注意到您在页面顶部有滑块，所以在您的特定情况下，全屏显示不会有帮助，代码片段2演示了bxSlider边缘样式。请以整页模式查看这两个代码段

代码段1中的所有内容都适用，但以下规则集除外

…如果有任何背景图像具有

背景大小：cover

，则应为

背景大小：contain

。在本演示中，幻灯片1如前所述进行了修改

基本上，将

height:100vh

更改为

height:auto

并添加

min height

，该值根据布局而变化，但使用绝对值。在某些情况下（例如绝对值：200px，内在值：20vh，相对值：20%），内在值和相对值在

min height

下不能很好地发挥作用

---

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

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

---

而不是

更改

jquery.bxslider.css

不是一个好选项，因为我们可以使用自己的css文件覆盖它<代码>宽度：100%未填充图像。@这是一个图形，我知道，但我认为您可能会对整个web滑块保持相同的效果。这没有使图像填充滑块。这不会填充页面内部的图像slider@azs06对但是在我的例子中，图像并没有填满屏幕。要让图像填满滑块，你必须添加@Himanshu Bansal提到的

.bx wrapper img{width:100%}

。你可以发布你的HTML/JS吗，因为这可能更容易调试。我可以建议几种解决方案，但是如果没有你的代码，我不知道它们是否正确。你能提供你的代码吗，这将有助于调试。非常欢迎。我刚刚又更新了一次，我发现了为什么你的覆盖在一开始就不起作用。如果你是一个人的话，它本来可以工作的。所以我想建议对它进行编辑只是因为你的会话即将到期？@StephenLeppik你是对的，先生。我通常会打开两个标签，我相信在打开第二个标签或类似内容之前，我已经清除了缓存。

 /* Override */

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

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

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