Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nivo Slider: First image is scaled unproportional when displayed the first time

I'm using the Nivo Slider jQuery Plugin in a div that has a smaller size then the images I'm displaying. When the Slider slides to the second image an on the images are scaled down correctly.

But when the first image is displayed for the first time (directly after loading the page), it is scaled only in width, but not in height. How can I change that?

Example: Let's say, all my images have a size of 1024*768 pixels. The div has a width of 400px. And I have 3 images in the slider.

  • directly after loading image 1 is displayed with 400*768 pixels (wrong)
  • then it slides to image 2 in 400*300 pixels
  • then to image 3 in 400*300 pixels
  • then to image 1 in 400*300 pixels (right)
  • ...

image 1 wrongimage 2 right

EDIT: I just noticed, this only happens in IE, in Firefox there is no such error.

like image 429
Hinek Avatar asked Feb 14 '13 10:02

Hinek


2 Answers

I had the same problem too - I added height: auto !important; to .nivo-main-image.

like image 198
Cyndeed Avatar answered Nov 15 '22 08:11

Cyndeed


In nivo-slider.css add

.nivoSlider { height:520px; }//specifies the height
like image 35
Mario Gonzales Flores Avatar answered Nov 15 '22 07:11

Mario Gonzales Flores