OData / odataorg.github.io

Staging site and collaboration repository for http://www.odata.org
MIT License
63 stars 101 forks source link

Mobile Issue - Carousel Reszies without preserving Aspect Ratio #335

Open BrainSlugs83 opened 1 year ago

BrainSlugs83 commented 1 year ago

I noticed when using the site on my mobile device (Android 10 / Kernel 4.9.186-22990479 / Chrome 109.0.5414.118), that the aspect ratio of the carousel images appear to be incorrect.

It doesn't cause any usability issues, but it looks a little disturbing on portrait mode IMHO.

In landscape it's also incorrect, but it's passable; I probably wouldn't have noticed if I hadn't already been looking for it. -- But portrait is ... not great. 😅

I think it's just stretching the background image by width only, to match the view, and so it ends up being mismatched with the height on small displays. -- I would recomend instead, doing an off-center Zoom on the image and cropping it to fit the intended area (e.g. zoom in the left side of the image and then crop it to fit the intended area with CSS; this will let you keep the same general look without the distortion).

Here is a simulated image from my desktop web browser where I reproduced the issue by resizing the window to be small: image