jQuery Cycle 2 Responsive w/ Centered Slides

Question

I'm attempting to set up a responsive image gallery using the excellent Cycle 2 jQuery plugin. The gallery will feature both portrait and landscape images.

I am using the Centered Slides option (Cycle2's Center plugin: http://jquery.malsup.com/cycle2/demo/center.php) and this seems to be causing problems in Webkit browsers (try resizing your browser window if this isn't apparent at first!)

http://goo.gl/NFFZk

The green background represents the cycle container.

Without the center options added ( data-cycle-center-horz=true data-cycle-center-vert=true ) the whole thing is working well, see:

http://goo.gl/p76wi

I cannot work out what is causing the problems with the centered version.

The CSS code on the images is pretty minimal:

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

The containing element's CSS is here

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

Many thanks in advance for any help!

Answer 1

Here's another option.

$('.cycle-slideshow').on('cycle-initialized', function( event, opts ) {                
    $(window).trigger('resize');
});