javascript - 如何使图像填充 slider

标签 javascript web responsive bxslider

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

编辑:

这是我的样式表:

.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 选项，但图像仍然没有填满 slider 。它的右端还有一些空间。

最佳答案

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

  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就像使用大锤然后双类是圆头锤。

更新

我重新阅读了您的问题并注意到页面顶部有 slider ，因此全屏在您的特定情况下无济于事，代码段 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 不能很好地锻炼内在值(value)和相对值(value)在某些情况下(例如绝对值: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 - 视口(viewport)边缘顶部

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

关于javascript - 如何使图像填充 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41924573/

上一篇：javascript - 我如何遍历在 javascript 中使用 getter 的对象

下一篇：javascript - 使用 react 时在 preventDefault() 之后提交

相关文章：

javascript - 如果用户在下拉列表外部单击，则关闭下拉列表

javascript - 使用jquery自动完成我试图获取文本框中的值作为表数据不是来自在文本字段中使用ajax的json

在 IE6 中以不同大小呈现的 Unicode 字符

html - Bootstrap 响应式表单

css - 在响应式 div 中限制图像(Bootstrap 4)

html - 响应式设计有效，但没有水平对齐

javascript - 我如何在 reactjs 中渲染一个对象

javascript - 如何让我的 API 请求获取更新的数据库？

java - 如何在 Jquery 中获取/触发复选框在页面加载后执行自身

java - OGNL类型转换器演示

©2024 IT工具网  联系我们