jquerycssnivo-sliderimage-sizeresponsive-slides

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


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.


Solution

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