Question

我有一个问题，我的精灵没有占据100％宽度的容器的整个宽度？显然我的图像精灵上的图像有不同的大小，但我不能使图像参考符合容器的宽度，并且有奇怪的空白作为内容？

我认为制作相同尺寸会解决问题，但是我必须使用图像精灵吗？

这是我的fiddle和我的代码

 html,
 body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.slider {
 width: 600px;
 height: 400px;
 margin: 0 auto;
 border: solid;
}
/* demo test purpose*/
.slider>div {/* see me */
 box-shadow:0 0 0 1px ;
}
 .slider #img1  {
    background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 0;
    background-size: cover;
  width: 600px;
  height:400px;
  }
 .slider #img2 {
 background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 25.026%;
 background-size: cover;
 width: 100%;
 height:100%;
 }
 .slider #img3 {
 background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat  0 12.87%;
 background-size: cover;
 width: 100%;
 height:100%;
 }
 .slider #img4 {
 background: url('https://s31.postimg.org/hxrherccb/sprites.png') no-repeat 0 33.65%;
 background-size: cover;
 width: 100%;
 height:100%;
 }

Answer 1

尝试使用100vh和100vw代替100%：）

Answer 2

这是我快速制定的一个例子。老实说，这不是你的代码，你只是使用一个糟糕的精灵表。创建精灵表时，请确保所有图像都是完全相同的尺寸。将图像元素的尺寸设置为与精灵中的图像相同（您必须使用像素指定宽度和高度）。这就是它的全部内容。

希望这有帮助。

.slider {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  list-style: none;
  background-color: #eee;
}

.slide {
  width: 100px;
  height: 200px;
  background-size: 1022px 755px !important;
  border: 1px solid black;
}

.slider .slide:nth-child(1) {
  background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png');  
}

.slider .slide:nth-child(2) {
  background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png'); 
  background-position: 246px 0;
}
.slider .slide:nth-child(3) {
  background: url('http://orig11.deviantart.net/1e13/f/2014/314/b/a/high_quality_paper_mario_sprites_by_fawfulthegreat64-d860r1v.png'); 
  background-position: 365px 0;
}

<html>
  <head>
  </head>
  <body>
    <ul class="slider">
      <li class="slide"></li>
      <li class="slide"></li>
      <li class="slide"></li>
    </ul>
  </body>
</html>

如何调整图像以适应整个宽度和高度？

2 个答案: