Positioning Photos in Cropped Carousels

I Need Help
1

Hello folks. I have a question that I hope someone can help me with.

I’ve added a full-width image carousel to a page of a new site. As I want the photos in this carousel to be larger than the Blocs default when viewed on phones, I’ve been preparing the images with a 4:3 aspect ratio (1200px x 900px). But this makes the carousel too large when viewed on a desktop.

So I’ve created a new class which has a maximum-height of 750px for desktops, and set the Overflow to Hidden. This class has been applied to the carousel, and everything works perfectly. However only the bottom of the photo is cropped.

What I’m now trying to work out, is a way for my class to hide the photo equally from both top and bottom, so the photos remain centred within the carousel. Does anyone know if this is possible? Or is there a smarter way to do what I want?

2

Have different carousels and photos according to the target device.

So one carousel only visible on mobile, one on desktop.

1 Like
3

Thanks for the suggestion, but that’s not going to work. My client will be changing photos in the carousel on a regular basis via a CMS, so it needs to be a simple solution. I want them to be able to do something once, not several times.

4

Then perhaps try a 3rd party carousel.

5

Could you use a “percent” setting class instead approximating the size you want?

6

Nice idea! Thanks @HMM. I’ll give that a whirl and see what happens.

7

I’m kind of answering my own question here, but what I’m looking for is where to assign the “object-fit: cover” CSS property to the image carousel that I’ve created in Blocs. This link shows what I want to happen to the images in this feature. Thoughts anyone?