Item Detail Banners are misaligned with their respective backdrops for series' artworks.

[maru801]

Describe The Bug Item Detail Banners no longer display correctly in relation to backdrops unless the display is in full-screen mode.

In older releases (10.7.7 or older), the item detail banner for each series would match the backdrop regardless of the display size. Now in 10.8.0, the detail banners stretch differently causing it to not match up perfectly with the backdrops of the same image unless the display is changed to full-screen mode. I also found this issue in other programs that use the web interface such as the Jellyfin Media Player when I pull it out of its full-screen.

I don't know how the previous releases handled this. Maybe the backdrop was resized to account for the detail banner? I don't know if this is an issue with the detail banners or backdrops.

Steps To Reproduce

1. Go to the local User Display Settings tab and enable backdrops and detail banners.
2. Insert a backdrop to any series (if you haven't previously).
3. When you open the series, the detail banner should be the same as the top portion of the backdrop and should be misaligned to the actual backdrop. This is easier or harder to notice depending on the backdrop image.

Expected Behavior Item detail banners and backdrops should align so that they both connect together and appears as one image regardless of the current display size (as in previous releases).

Logs No logs errors generated.

Screenshots https://i.imgur.com/jdYjSSj.jpg (the bug with default CSS styling) https://i.imgur.com/77rhC59.jpg (the bug with some custom CSS styling) https://i.imgur.com/vo1oRSy.jpg {How the banner & backdrop are supposed to look)

System (please complete the following information):

• Platform: Linux (running in a docker container)
• Browser: Chrome, Firefox, some others
• Jellyfin Version: 10.8.0

Additional Context

[jellyfin-bot]

This issue has gone 120 days without comment. To avoid abandoned issues, it will be closed in 21 days if there are no new comments.

If you're the original submitter of this issue, please comment confirming if this issue still affects you in the latest release or master branch, or close the issue if it has been fixed. If you're another user also affected by this bug, please comment confirming so. Either action will remove the stale label.

This bot exists to prevent issues from becoming stale and forgotten. Jellyfin is always moving forward, and bugs are often fixed as side effects of other changes. We therefore ask that bug report authors remain vigilant about their issues to ensure they are closed if fixed, or re-confirmed - perhaps with fresh logs or reproduction examples - regularly. If you have any questions you can reach us on Matrix or Social Media.

[TheHYPO35]

Has the fix linked above been implemented yet? The fix suggests it's being added to the next stable release, and the latest release seems to be 3 weeks old, but at the moment I still see the issue on my Jellyfin Media Player Windows client and browser client.

[maru801]

So I checked again and it turns out this has somewhat been fixed since I posted the initial issue.

So all the detail banner images line up perfectly with the backdrops while using Jellyfin in a chrome-based browser, but not on the Jellyfin Media Player program. It turns out that as of now, using a backdrop that is not in your current display's aspect ratio causes an image misalignment. For one series in my library, its backdrop image that I placed for it has an aspect ratio of around 4.5:3 and this causes the same issue to happen on Jellyfin Media Player on my 16:9 monitor (if I resize the media player window to be close to the aspect ratio, it will align again). For some reason, my browser doesn't have this issue and everything works fine on that.

Also, it seems like this is mainly affecting backdrops that the horizontal or vertical pixel length is smaller than that of your current display's horizontal/vertical pixel length (as when I shrink the window size to fix the 4.5:3 image, all my other 16:9 backdrops still display perfectly with the banners).

[thornbill]

Fixed by https://github.com/jellyfin/jellyfin-web/pull/5139