Skip to content

Mobile Issue - Carousel Reszies without preserving Aspect RatioΒ #335

@BrainSlugs83

Description

@BrainSlugs83

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions