• Registered: 2014-03-14
  • Posts: 1

Topic: Images not preserving aspect ratio

I'm using the Juicebox plugin for Drupal and I've just finished setting up my first gallery.

However, I'm having an issue with the "width:auto" that is automatically set by the code.

When the viewport height is approximately 400px, the images show up fine. When I expand beyond that, the image starts to stretch, so I see a black shadow on the sides where the image should be in order to have the correct ratio.

This happens on Chrome as well as Firefox.
Somehow the "width:auto" inline style for the <img> tag is not behaving properly, because the height/width for the container are calculated properly. I have the display settings for resizing the image set to "scale" on the CMS side, so I assume this is something caused by the Juicebox processing.

Any ideas on how to fix this issue?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Images not preserving aspect ratio

If Juicebox's imageScaleMode configuration option is set to SCALE (or SCALE_DOWN), then the image's aspect ratio should be respected. If it is not, then there may be an outside factor causing this problem.
Perhaps there is some global CSS on your web page which is affecting all images on your page, including those in your Juicebox gallery. Check your web page's CSS to see if you can find any global CSS rules which might be causing a problem. (Look out for use of the global selector * or rules than apply to all div, img or p tags.)
Also, fire up your browser's developer tools and see if you can find out if there are any CSS rules being applied to the images in your gallery which are not originating from Juicebox itself.
If you would like me to see if I can determine the cause of the problem, then please post the URL to your gallery so that I can take a look.