1

I have a site with a hero banner image.

This is how it looks on desktop:

enter image description here

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

enter image description here

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.

  • 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 Apr 15 at 16:06
  • That is true but I'm sure he is using a theme that supports an image there – RiddleMeThis Apr 15 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 Apr 15 at 16:25
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 */
}
  • thanks for your solution. how can I manage that, considering that WP automatically adds srcset properties, so it will show a scaled, smaller image? – Santiago Valdés Apr 15 at 16:27
  • You can remove the srcset if its causing issues - add_filter( 'wp_calculate_image_srcset', '__return_false' ); or adjust it - martinwolf.org/before-2018/blog/2016/02/… – RiddleMeThis Apr 15 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.