javascript – 如何使图像填充滑块

2023-08-08 12:00:16

我正在开发一个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);
}

我添加了宽度：100％和边框：0选项,但图像仍未填充滑块.它在右端有一些空间.

解决方法:

更新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.我在课堂上加倍,以提高特异性.如果！重要就像使用大锤那么双级是一个圆头锤.

UPDATE

我重新阅读了您的问题并发现页面顶部有滑块,因此全屏在您的特定情况下无法提供帮助,Snippet 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.

基本上,更改高度：100vh到height：auto并添加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.

SNIPPET 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 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>

码农公寓

相关文章