Uploaded picture not scaling-to-fit for mobile

[merefield (Robert)]

Guys,

I’ve noticed that the ‘thumbnail’ of uploaded pictures is not completely scaled-to-fit, it is cropped when showing in portrait view on mobile.

Might it be more sensible/possible to scale-to-fit the pictures instead, so the right edge always shows? Currently it can lead to awkward looking composition, e.g. chopped off objects or half people.

Let me be more specific - this is particular an issue on iPhone 6/7/8 and landscape images which is a very common use case.

This would also presumably have the additional benefit of reducing the thumbnail vertical real-estate which on mobile is clearly scarce.

Thanks!

PS Any way of hacking this via Theme/CSS, similar to request here?

Refining my search criteria to see if this has been asked before, reveals the following, but former is CLOSED, however I feel this is still an issue in a very popular use case:

Feature Request: Tall and Thin Image Handling

I think this is a feature request. We have users putting images in posts, and sometimes those images are quite tall, i.e. height much greater than the width. Discourse provides an image preview in the post, but uses the image height within the post height to determine the aspect ratio. An example image looks like this: [image] Ideally we’d like to present this image so that the image width takes the full post width, but perhaps shows a ‘More…’ link at the bottom. The ‘image viewer overlay’ (n…

https://meta.discourse.org/t/images-not-getting-posted-in-their-full-size/70510/5

[codinghorror (Jeff Atwood)]

This is by design, try posting a 400 x 8000 image to see what I mean.

[merefield (Robert)]

Thanks @codinghorror I guess it must be a trade-off.

It would be great to be able to customise this at site level though, as I’m sure I’ll have way more 4000x3000 pictures than 400 x 8000

[Johani (Joe)]

I’m having a bit of trouble following.

Your problem is landscape images on mobile, correct? As far as I know, landscape images are responsive. They scale and don’t get cut off.

The topics linked address extra long portrait images. Which is where I’m a little bit confused

Are you seeing the issue on your phone or in browser dev tools? Is there anyway you can upload an image like you described here? If I get the same result and there’s anything that I know how to do about it with CSS I’ll help

[merefield (Robert)]

@lll

Your problem is landscape images on mobile, correct? As far as I know, landscape images are responsive. They scale and don’t get cut off.

Thanks for taking an interest, Joe.

On desktop, I have no issue. On production iOS a standard landscape photo from my iPhone 7 does not scale to fit, it is cropped.

I guess the solution needs to take into account all likely use cases, but it would just be nice if vanilla 4:3 landscape wasn’t cropped, just scaled to fit. Perhaps I’ve breached a size limit?

The topics linked were linked because they cover the same functionality, if not the identical use case (4:3 in my case, long tall on at least one of those links)

btw, I don’t think I’d want to see 16:9 cropped either.

This is not just an issue for artists, imagine showing a 16:9 graph …

I’ve not tackled this from the developer seat, so please forgive me if this is an impossible circle to square given all competing use cases.

[Johani (Joe)]

Something is off

just to rule this out, is your phone set to mobile view? At the bottom of the hamburger menu

could you have accidentally triggered desktop view on your phone? That’s the only time I can reproduce the issue for a 4000x3000 image.

In mobile view and on a mobile device (yes, these two are different) 4:3 images and 16:9 images are scaling OK on my end.

[merefield (Robert)]

Gah!!!

You hit it right!

I had ‘Material Design Theme’ selected!!!

Thanks Joe!

Looks like an effect of the theme on mobile.

Moved to Support category.

[Johani (Joe)]

No worries, I’m glad everything is sorted now