learningjavascriptks learningjavascriptks - 4 months ago 13
CSS Question

how to adjust image to fit whole width and height?

I have a problem with my sprites not occupying the whole width for my container with 100% width? obviously images on my image sprites have different sizes but I cannot make an image reference fit to the width of the container and there is that weird white space as content?

i think making them same size will fix the problem but do I have to do that with image sprites?

this is my fiddle and my code

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

Here's an example I quickly drew up. Honestly, it wasn't your code, you were just using a bad sprite sheet. When creating a sprite sheet, make sure all images are the exact same dimension. Set the image element's dimensions to be the same as the image in the sprite (You'll have to specify width and height with pixels). That's really all there is to it.

Hope this helps.

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

Comments