3

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.

Daniel
  • 538
  • 1
  • 8
  • 21

2 Answers2

14

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

Daniel
  • 538
  • 1
  • 8
  • 21
0
 .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

}
Eduardo La Hoz Miranda
  • 2,030
  • 23
  • 31
  • It would be helpful if it didn't perturb the sliders flexibility. If I add media queries and resize browser window I need the slider to resize proportionally. So adding fixed height won't change anything. But thanks for your effort anyway.. – Daniel Mar 26 '14 at 09:57
  • Thank you for your effort, but I need it to be flexible, because I've changed a bit a site measurements values, from px to mixed ems and percents. When a browser windows shrinks I need the slider to shrink dynamically as well. If I set fixed sizes for every media query it will shrink or grow on resolution change, but not be flexible. I found out, that setting `.nivoSlider img{height:100% !important;}` and `.nivo-main-image{height:100% !important;}` probably fixes the problem, but I need to test it in every condition to be sure. – Daniel Mar 27 '14 at 17:49