Geek asks and answers

NIVO Slider: The first image is scaled disproportionately when displayed for the first time.

I am using the jQuery plugin for the Nivo slider in a div, which is smaller than the images that I display. When the slider slides to the second image, the image in the pictures will be reduced correctly.

But when the first image is displayed for the first time (immediately after loading the page), it scales only in width, but not in height. How to change this?

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

  • immediately after loading image 1 is displayed with 400 * 768 pixels (incorrect)
  • then it slides to image 2 at 400 * 300 pixels.
  • then image 3 at 400 * 300 pixels
  • then image 1 at 400 * 300 pixels (right)
  • ...

image 1 wrongimage 2 right

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

+5
source share
2 answers

I also had a problem - I added height: auto !important;in .nivo-main-image.

+14
source

In nivo-slider.css add

.nivoSlider { height:520px; }//specifies the height
+1
source

More articles:


All Articles