OData / OData/odataorg.github.io

Mobile Issue - Carousel Reszies without preserving Aspect Ratio

Open
#335 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
73
Forks
106
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Inspect the carousel markup and CSS, then reproduce the issue at a narrow portrait viewport using the supplied screenshot and mobile dimensions. Update the responsive image presentation so the carousel preserves the intended aspect ratio without distortion, and verify the result in both portrait and landscape layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.