[Help Wordpress] Auto Height & Image Scaling in Responsive Design

Auto Height & Image Scaling in Responsive Design

Hi Dmitry,

I'm building a custom responsive wordpress theme for a client and using RoyalSlider to replace the default wp image gallery. I'm having trouble with the responsive nature of RoyalSlider, specifically the auto height feature and the scaling of images. I'll try to explain my issue as clearly as I can.

My client will be using images of all different sizes and aspect ratios. I'm trying to set things up so that wide images fill the available width, tall images are constrained at a certain height (which means they may not fill the available width), and small images are not scaled up. I've pretty much got that figured out, but I want the slider height to adjust automatically to the image height, and any content that is beneath the slider to move up or down as the slider takes up more or less vertical space.

I've got auto height enabled, but it seems I still need to enter a height for the slider itself or it doesn't display any images. This constrains the image height, which is what I want, but for small images or particularly wide images there is a gap left between the slider and any content beneath it. I believe this gap is caused by needing to define a height for the slider, even though auto height is enabled.

I have attached three screenshots to help illustrate my point. Is it possible to set up the slider with "true" auto height?

I've tried so many different combinations that I'm afraid I can't clearly list them all here, but one of the things I've experimented with is leaving the height blank under "size & scaling" and defining height or max-height via media queries in my style sheet. This only achieved marginal results, not the true auto height I'm looking for.

Thanks for your help and all the great work you've put into RoyalSlider.

.

help.dimsemenov.com