How can I preserve aspect ratio of images inside stacked sliders and image containers?

[andreivicol]

Hello.

I am trying to make some pages to showcase our products and make use of both sliders and image containers to display the images. Unfortunately, the images I have have slightly different resolutions but they are PNGs and the subjects inside have the same shape, so visually they look correct.

I’m trying to place them inside stacked sliders objects, have them all be forced to a unitary height and make the width variable to that the subjects are not distorted. Unfortunately, when I make the height fixed, the width remains the same and the subject gets distorted.

How can I make the images inside sliders to have a fixed height and variable width?
What about normal image containers?

Also, what is the structure of stacked sliders objects from an HTML pov so I can better understand how to programmatically handle this kind of elements in the future?

[ruenel]

Hey Andrei,

Thanks for writing in!

“How can I make the images inside sliders to have a fixed height and variable width?
What about normal image containers?”

You can start by inserting the prefab “Slider (Inline)” element. Add your images in each slides and tweak the image dimension when needed. The “Slider (Inline)” has already the fixed height and variable width. You cannot use the “Slider (Stacked)” because this will always have the same width.

If you need help with your set up, please provide us access to the site where we can find your page with the Slider set up in it.

Best Regards.