Cycle2 - Centered Slides problem with responsive images

Cycle2 - Centered Slides problem with responsive images

Hi everyone,

I'm using Malsup's Cycle2 to build a responsive slideshow that features both landscape and portrait images that will maintain their respective aspect ratios.

It's working well so far, but the Centered Slides functionality ( http://jquery.malsup.com/cycle2/demo/center.php) is proving problematic in Webkit browsers. Seems to be working as intended in Firefox.

Here's the working version without centered slides:


... and this is working fine thus far (the green background represents the cycle container)

Here's the exact same version but with centered slides activated:


Try resizing your browser window if this isn't apparent at first - the images' top left corner is being positioned in the center of the containing element, rather than the image itself being centered within the container.

As this is a responsive slideshow there is no width or height declared in the HTML for the images - the CSS for the images is as follows:

  1. .cycle-slideshow img { max-width:100%; max-height:100%; }

My question is, is it possible to make the centered slides functionality work with a responsive cycle? I would've thought so, but cannot seem to get past this, and am certain I'm missing something!

Any help appreciated!

Joe