How to Center and Scale Varying Image Sizes

Would you like to center and scale varying image sizes in your slider without using cropped images? You can do that with a little CSS. We’ll show you how you can center and scale varying image sizes.

This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.

Setup
FAQs
- Do I have to use CSS?

Setup

Step 1 – Install and activate the CSS Addon

Your first step will be to install and activate the Soliloquy CSS Addon.

If you need any assistance in installing addons, please take a look at this article.

For this instance, we’ll be installing the CSS Addon.

Step 2 – Create or edit your slider

Next, create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Step 3 – The CSS

The CSS we’ve used in our demo is shown below.

You’ll need to change this ID number to match your slider ID number. You can find this by looking in the sidebar of your slider edit screen.

For more information on how to find your slider ID number you can read this article.

[css]#soliloquy-container-508526 .soliloquy-image {
max-height: 300px;
}[/css]

Be sure to update the -508526 with your own slider ID number

If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.

Check out our demo of this in action!

Once you click Publish or Update on your slider, you’re all set!

Would you like to change the crop position of your slider image cropping? Take a look at our article on How to Change Crop Position for Slider Images.

FAQs

Do I have to use CSS?

A: You can of course choose to Crop Images in Slider? setting. This would crop the images in your slider to be the same width and height.

Soliloquy Documentation