Prioritize image height in grid

Support
#1

Hi there

I have placed a slide container within a grid. The images in the slides have different hights. But all slides are always pushed open to the hight of the highest image and the width stays fix. For exampel my purple image is the larges in height:

grid1
grid12560×1354 155 KB

The blue image is displayed at the same width but in the hight on the top and bottom of the image there is empty space because of the higher purple image:

grid2
grid22560×1354 167 KB

How can I prioritize the image hight befor the image width, so all images will be the same height with a flexible width:

grid3
grid32560×1354 150 KB

Thank you very much for your help!

Kind regards,
Felix

#2

Hello Felix,

Thank you for the inquiry.

We may need to inspect the site to better understand what you’re trying to do. Please provide the site URL and login info in the secure note.

Have you tried setting the image width to auto and then define a specific height? This should constrain the image to a specific height and automatically resize based on its aspect ratio.

Best regards.

#3

Hi Ismael

Thank you very much for your reply.

Yes I tryed with a specific height but then the image size looses his relation to the rest of the website. I would like to keep it on “auto” but instead of changing the hight of the images (as it is now with auto height and auto width) I would like to change the width, so the full hight of the grid is used and the bigger images scale down in width, if that makes sense.

Grid_Slide_Container_01
Grid_Slide_Container_011400×1092 7.48 KB

Grid_Slide_Container_02
Grid_Slide_Container_021400×1092 7.72 KB
4

Grid_Slide_Container_03
Grid_Slide_Container_031400×1264 8.88 KB

Grid_Slide_Container_04
Grid_Slide_Container_041400×1264 8.1 KB

Thank you very much for looking into this.

Kind regards,
Felix

#4

Thank you for the update. We created a test page and applied the home template to it. To prioritize the image height, we set the slide height to 500px, with the image height at 100% and the width set to auto. You can find the link in the secure note.

#5

Hi Ismael,

Thank you very much for your reply and for creating the test page. I really appreciate it.

Yes, that’s exactly what I was looking for. Unfortunately, the image height is no longer dynamic with this method. If the screen size drops below 500 pixels, the taller of the two images will extend beyond the shorter one again. The solution would be great if it were dynamic.

I still don’t understand why the image width in Cornerstone prioritizes the image height in the grid, since I have both set to auto.

Thanks again for your help!

Best regards,
Felix

#6

If the screen size drops below 500 pixels, the taller of the two images will extend beyond the shorter one again.

It’s possible to define different max-height or height values for different breakpoints.

Screenshot 2025-04-10 at 10.12.46 PM
Screenshot 2025-04-10 at 10.12.46 PM2880×1588 380 KB

This should allow you to adjust the size of the image based on the target screen size or device.

Let us know if you have additional questions.

#7

Hi Ismael

Thank you very much for your reply. Yes, I have tryed this but in combination with the grid, it is too dynamic and there are always situations, where the taller image is extending beyond the shorter one… I will try further and let you know, how it goes :slight_smile:

Kind regards,
Felix

#8

Hi felix,

Thanks for the information.