Stretching an image

Question

All right so i have got an image inside a slider and it does not scale properly.

It is first small and then stretches.I want it to be stretched all the way through.How can this be achieved?

Have a look at the screenshots(ignore the red in second screenshot):

And the css:

.slider-wrapper { 
    width: 310px; 
    height: 580px;
      background: url("images/S4.png") center center ;
background-size: contain;
   background-repeat: no-repeat;        
}
.nivoSlider {
    position:relative;
    width:268px;
    height:474px;
    top:51px;
    bottom:0px;
    left:21px;
    right:23px;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    width:268px;
    height:474px;
}

And a link to the page:

http://oneapptheme.github.io

Answer 1

You can try this :-

.nivoSlider3 img{height:100% !important;}

Answer 2

use in the css file of image... background-size: 100%;