How to solve height resizing issue during 'fade' transition in Nivo Slider?

Question

I'm using Nivo image slider and it appears, that it resizes images in a wrong way during 'fade' transition. That's a very different problem than the ones I found in the web.

All images are 900 x 300 px and the slider is 1000 x 333 px. First image is stetched properly, but when it comes to change, during transition, fading-in image is cut to 1000 x 300 px. After change it goes to slider size. I don't really know what's the problem, is it my css (I tried everything, even installing a fresh slider installation), or is it slider itself??

Maybe there is someone, who can tell me, because I feel confused. I would appreciate any help, thanks in advance.

EDIT:

There is no Nivo slider installed at site address given as example anymore, so I removed the url, sorry.

Answer 1

I found a solution and it seems to be allright. The only code to add and still keep it responsive is:

.nivoSlider img{height:100% !important;} 
.nivo-main-image{height:100% !important;}

After doing so you receive nice and reponsive slider, which can work with layouts mesured in %.

Answer 2

 .nivoSlider {     height: 300px;    }

If you are doing it responsively, you need to figure out the correct width and height dimensions according to the media query being used. Below are just random numbers so you can see what I mean:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

.nivoSlider     {     height: 300px;    }
.nivoSlider img {     height: 300px;    } 

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.nivoSlider     {     width:300px; height: 200px;    }
.nivoSlider img {     width:300px; height: 200px;    }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.nivoSlider     {     width:200px; height: 100px;    }
.nivoSlider img {     width:200px; height: 100px;    }

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

and more here

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

and more here

}