Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Center and Scale Varying Image Sizes

We’ve been asked the following question regarding image sizes and positioning:

Can the slider remain the same size with the images centered within it when the images it contains have different sizes (smaller and larger than the soliloquy-container dimensions)?

That’s a good question, and the answer is yes. By default, Soliloquy will scale images down based on the width provided and use the height dimension as a last resort, but in cases where images are completely different dimensions, Soliloquy does not attempt (for performance reasons) to automatically center and resize images to fit the constraints entered.

However, you can force this to happen using CSS.

All Sliders on Your Site

If all of your sliders are the same height on your site, add the CSS to your active theme’s style.css file to affect all sliders. Use the following and adjust the max-height value to match the height value you’ve entered for your slider dimensions:

.soliloquy-container .soliloquy-image { max-height: 300px !important; }

Individual Sliders

If you want to adjust individual sliders we recommend using the CSS Addon to place the CSS within individual sliders. Use the following and adjust the max-height value to match the height value you’ve entered for your slider dimensions. You’ll also want to change the 36 to match the ID of your individual slider:

#soliloquy-container-36 .soliloquy-image { max-height: 300px; }
[i]
[i]