6

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 wrong image 2 right

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

Hinek
  • 9,519
  • 12
  • 52
  • 74
  • Hi! I can't scale down any of my images inside nivo-slider. Could you please write what settings you use? I have tried to add width and height to tag, add css for it, etc. - I still get the cropped images. So, they are not scaled, just cropped. – Svitlana Oct 09 '13 at 11:20
  • 1
    @Svetlana, don't set the size of the , set the size for the outer
    , then Nivo will resize the images to fit.
     – Hinek Oct 16 '13 at 14:10

2 Answers2

14

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

Amal Murali
  • 75,622
  • 18
  • 128
  • 150
Cyndeed
  • 156
  • 1
  • 2
  • 1
    Correction: with !important, the slider does not resize dynamically if the displayed pictures have different heights. I changed it against "height: auto;" without the !important, this still fixes the IE bug but also allows dynamical resizing. – Hinek Feb 26 '13 at 10:23
1

In nivo-slider.css add 

.nivoSlider { height:520px; }//specifies the height
Mario Gonzales Flores
  • 695
  • 7
  • 16
  • This would set a fix height ... what if I use more than one slider with more than one picture sizes? As I already commented on Cyndeed's answer: "height: auto;" fixed my problem. – Hinek May 08 '13 at 08:13