homepage - Hero image cropped at different dimensions

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 <picture> 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.

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 <picture> 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.

• images
• homepage
• cropping

Share Improve this question edited Apr 15, 2019 at 15:32 Santiago Valdés asked Apr 15, 2019 at 15:24 Santiago ValdésSantiago Valdés 1133 bronze badges 3

• 1 absolutely nothing in the image you included should be an image. That should all be text and made to look that way via CSS with media queries to change styling for different screen sizes. – mrben522 Commented Apr 15, 2019 at 16:06
• That is true but I'm sure he is using a theme that supports an image there – RiddleMeThis Commented Apr 15, 2019 at 16:08
• @mrben522 that would be the most ideal case, but we don't have the resources to do that evey week (we change that banner every week). so... yeah, in an ideal world that would be the case, but it isn't and we use an image because it's faster to change – Santiago Valdés Commented Apr 15, 2019 at 16:25

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Instead of creating a new image size or uploading a completely different image just for mobile you might want to play around with object-fit and object-position CSS.

object-fit and object-position work basically the same as background-size and background-position but instead of being applied to background-image's only they work on objects like the <img> tag.

Use these with media queries and you can specify how you want the image to look on mobile.

Check out this Fiddle. Notice how they use the same image but it looks more or less zoomed in at different widths, this is essentially what you want to do.

You can set these different values on object-fit...

• fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
• contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
• cover: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
• none: image will ignore the height and width of the parent and retain its original size.
• scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.

Note: By default the image is centered within the content box. You can change this by using object-position.

Example:

img {
    object-fit: none;
    object-position: 50% 50%; /* default value: image is centered*/
    object-position: 0 0; /* positioned top left of the content box */
}

You can simple use below css to the container class of your hero banner image. For eg. if the container class of your banner hero image is suppose 'hero-container' then add below css, here you can decrease the value 100 to 80 or 70 as per the height of the banner image you need. 100vh will show in full screen height, so you can reduce this value to as per your requirement, css below:

.hero-container{height: 100vh;}