Hero image cropped at different dimensions

enter image description here

I have a site with a hero banner image.

This is how it looks on desktop:

This is how it looks on mobile (via Chrome Dev tools):

As you can see, the image on mobile is too narrow, I want it to look “taller”. Basically, another aspect ratio than the one from desktop.

There are several alternatives that I’ve explored and none worked, so not sure what’s the best approach. Some of the alternatives I manage:

1) Crop the image for mobile devices on a different aspect ratio, from center to the edges. That way, the core message (MEGA SALE) will look ok and the rest won’t look on mobile (never mind about that). I don’t know how to do that and also the problem is that the image has srcset, so that gives more complexity.

2) Use the same big image for all devices but use min-height, center the image so that only the center part will appear. Problem, again, is that srcset will show smaller image, so this approach isn’t workign so far.

What’s the best practice for this? I’ve read A LOT about custom fields, add_image_size() function, srcset, etc. but so far I can’t figure this out.

Help is appreciated. Thanks a lot!

EDIT: Seems like the element is what I’m looking for, but now I’m stuck into how to integrate it with WP Upload Image and the cropping process.

Read more here:: Hero image cropped at different dimensions

Leave a Reply

Your email address will not be published. Required fields are marked *