css - how to adjust image to fit whole width and height? -


i have problem sprites not occupying whole width container 100% width? images on image sprites have different sizes cannot make image reference fit width of container , there weird white space content?

i think making them same size fix problem have image sprites?

this fiddle , 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%;  }

here's example drew up. honestly, wasn't code, using bad sprite sheet. when creating sprite sheet, make sure images exact same dimension. set image element's dimensions same image in sprite (you'll have specify width , height pixels). that's there it.

hope 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

Post a Comment