Images in Sliders — Responsive Problems / Ignoring Bounds

[Jmot]

Hi, I’ve encountered an issue where images inside of sliders are ignoring the boundaries of their containers. For example, I have slides set to a max-height of 400px, and regardless of how I adjust the images when they are full size, they do not act responsively. I’ve changed all of the Object Fit options as well as the width and height options, and nothing seems to fix it. Maybe I’m just missing something, but images don’t behave this way outside of sliders.

Sometimes these issues are visible inside of Cornerstone, and sometimes they only appear on the front end of the site. Here are screenshots of inside Cornerstone, and on the front end.

I’ll send you the url with your login credentials in a private note.

[ruenel]

Hello @Jmot,

Thanks for writing in!

Though the height of the slide is 400 pixels, the image height is way higher. You will need to set a maxim height for your image as well.

In this example, I am using calc(400px - 4em) which means that the maximum height of the image should only be 400 pixels minus the 2em top padding and 2em bottom padding of the slide.

Hope this helps.