Need Help Adapting Image Heights in Header 76 Component

·Nov 08, 2024 05:28 PM

Hey all! I'm struggling to get Header 76 to leverage images of different heights. I can't figure out how to get each image container to adapt to the image inside of it and adjust the rest of the column accordingly. Any help would be much appreciated!

2 comments

· Sorted by Oldest

Issues

Need Help Adapting Image Heights in Header 76 Component

Tyler A.

·Nov 08, 2024 05:28 PM

Hey all! I'm struggling to get Header 76 to leverage images of different heights. I can't figure out how to get each image container to adapt to the image inside of it and adjust the rest of the column accordingly. Any help would be much appreciated!

2 comments

· Sorted by Oldest

Matt J.
·
Tyler A. this might throw off the timing of the loop so it might not be worth it but if you at least wanted to adjust the ratio there's a way to do that as well. But to do what you want to do, essentially just remove the image wrapper div and then reset the position absolute and you should be good. The other way to do this would be to refer to the values within our image UI elements - its using the padding top CSS hack to create these ratios and they are something like 33.3%, 56.6%, 66.6%, 100% and 120%. https://www.relume.io/ui-elements?ui-elements-categories=images
Tyler A.
·
Thanks Matt J.! This worked perfectly.

Matt J.
·
Tyler A. this might throw off the timing of the loop so it might not be worth it but if you at least wanted to adjust the ratio there's a way to do that as well. But to do what you want to do, essentially just remove the image wrapper div and then reset the position absolute and you should be good. The other way to do this would be to refer to the values within our image UI elements - its using the padding top CSS hack to create these ratios and they are something like 33.3%, 56.6%, 66.6%, 100% and 120%. https://www.relume.io/ui-elements?ui-elements-categories=images
Tyler A.
·
Thanks Matt J.! This worked perfectly.