How can I improve the experience for the uploader & viewer when dealing with a horizontal container and a vertical image (uploaded by a user)?
I would like to avoid scaling and centering the vertical image into the horizontal container as:
If it's a strict requirement to have horisontal-oriented container, your primary task is to make it understandable for users. You can notice how others cope with this issue:
You can find a lot of examples, where the close problem is solved.
My suggestion is to use a signifier which conveys the idea of a) image is in a portrait mode, and b) image position could be adjusted (if needed). See possible solution:
As noted in the comments, you are limited in what you can practically implement because you are fighting to fit an image of x dimensions into a viewport of y dimensions.
As I see it, your options are:
Load images into the viewport, centre vertically and horizontally, if one of their dimensions is less than the equivalent for the viewport, zoom the image to stretch. Also then provide panning(/zooming) functionality, such as a thumbnail the user can move over to pan the main image (think the same as a lot of clothing outlets)
Orient the viewport appropriately for the image, vertical for vertical images, horizontal for horizontal ones etc.
Personally, if you want consistent viewport dimensions, I'd go for 1 - providing a thumbnail so users can see the whole image, then allocating the rest of the space for a zoomed (or 100%) pannable version.
Answering the UX side of the question, rather than the technical way to upload images, photographers often refer to the "long edge" side of a photograph, as we're not dealing with square images here, looking at your wire frames, some instruction text with imagery would be the best way to inform your users of the ideal size for uploaded images.
