Prevent Emby from Stretching ArtWork in non-Emby Aspect Ratio

[aikkie 1]

Hi, I believe this has been asked before but i couldn't find anything conclusive.

Is there a setting where I can choose to display the art work in its Original Aspect Ratio in Emby?

I have a bunch of fanart for old movies with 4:3 ratio and i do not want emby to stretch them into 16:9. I am fine with black border to the left and right of the 4:3 art work.

 

[ebr 16178]

Hi.  Exactly where are you seeing an issue?  Most of our apps will look at the aspect ratio of the first few items and decide how to display the items based on that.  So, if you had a library of all 4:3 material, it should display that way.

[aikkie 1]

I configured my movie library using all offline manual images. For every movie, there's one file with *-poster.jpg (3:4 ratio) and another with *-fanart.jpg (3:2 ratio). In the movie catalogue, I choose the view as "Thumb" - emby took the fanart and stretch it to 16:9 

[aikkie 1]

just to add, i have my backend 4.7.13 running on Raspberry PI and front end using Chrome remotely

[Luke 42078]

Hi, can you show a screenshot example of what you mean? Thanks.

[aikkie 1]

See below, poster and fanart with 2 perfect circles being stretched in emby.

folder content: 

Fanart in 4x3 ratio displaying 2 perfect circles

poster in 3x4 ratio displaying 2 perfect circles

Primary View

 

Thumbnail View

 

 

Video Listing View

 

[Luke 42078]

Ok this is normal. Thumb and fanart images should be 16:9.

[aikkie 1]

8 hours ago, Luke said:

Ok this is normal. Thumb and fanart images should be 16:9.

Can we have an option to have the 4:3 images centred (instead of stretched ) in emby 16:9 container? 

Or should i rename the pic into some other name such that image is not stretched? 

[Luke 42078]

Only the main poster is adaptive. The other image types all have fixed image sizes and expected aspect ratios.

[aikkie 1]

2 hours ago, Luke said:

Only the main poster is adaptive. The other image types all have fixed image sizes and expected aspect ratios.

Would you consider making "stretched to fit" feature optional in Emby future release?

[visproduction 315]

I think the current styles options are better.

'Stretched to Fit' is perhaps not the best way to describe your design preference. Images may appear stretched or squashed.  Either the original image is wrong or the styling causes the image to fill a div area which causes narrow images to widen, wide images to become narrower, tall images to squash and short images to get taller.  When all these are possible, 'Stretched to Fit' does not convey any design choice.

If you allow the poster size to change, it may cause parts of the page to break.  Have a look at the media pages in the 12+ sizes of mobile portrait and widescreen.  Sometimes, this image size change can cause text to overlap or sections pulled up.  Also check this in different languages.  Long translated words could be wrapped because now the available space is different.

The other issue is what about most people already are using the correct poster format which is used everywhere online.  This optional switch would make their pages have squashed poster images and it may not be very obvious how to fix it.  The result could easily be that people give up on the program, as too complex and use some other app.

Edited July 6, 2023 by visproduction

[aikkie 1]

I have read from some other threads that Emby intelligently stretch image with ratio close enough to 16:9 - can we not make this optional such that we can turn this feature off in settings?

 

 

[Luke 42078]

It’s possible, yes.

[aikkie 1]

8 hours ago, Luke said:

It’s possible, yes.

Thank you Luke - it will be nice to have that.

 

[robbbin 1]

Hey aikkie,

I've been troubled by the same problem in last few month until I found the solution below.

Add the following Custom css code in emby server settings, and save the changes.

.coveredImage {
    object-fit: cover;
}

The emby server version I use is 4.8.1.0

I have tested it in browser's desktop mode and TV mode, all work fine.

By the way, if you are fine with image crop, you can try using the Settings below, which will keep the 16:9 aspect ratio but without black border to the left and right.

.coveredImage {
    object-fit: contain;
}

[Luke 42078]

I would suggest removing that custom css once you have the 4.8.2 maintenance release. An adjustment has already been made for this and you will no longer need it.

[aikkie 1]

On 2/14/2024 at 6:36 PM, robbbin said:

Hey aikkie,

I've been troubled by the same problem in last few month until I found the solution below.

Add the following Custom css code in emby server settings, and save the changes.

.coveredImage {
    object-fit: cover;
}

The emby server version I use is 4.8.1.0

I have tested it in browser's desktop mode and TV mode, all work fine.

By the way, if you are fine with image crop, you can try using the Settings below, which will keep the 16:9 aspect ratio but without black border to the left and right.

.coveredImage {
    object-fit: contain;
}

This works perfectly! Thanks @robbbin!

i chose "contain" in the end - would you happen to know if it's possible to change the border colour?

the border was shaded with RGB (52,52,52), my intention is to change it to RGB(30,30,30) to match the background of the gallery so that the border is sorta invisbile.

Thanks!

 

[robbbin 1]

@aikkie

First, let me correct a mistake. I wrote the descriptions for the two examples in reverse. But seems you get the point.

And for the question you asked

On 17/02/2024 at 22:22, aikkie said:

i chose "contain" in the end - would you happen to know if it's possible to change the border colour?

the border was shaded with RGB (52,52,52), my intention is to change it to RGB(30,30,30) to match the background of the gallery so that the border is sorta invisbile.

If you go to browser’s F12 inspector menu, and choose the element which contains the image, you will find it is defined as bellow

So you can just add custom css to override it by using code bellow (Note: you need to use !important options to obtain higher priority)

.cardContent-background {
    background-color: rgb(30, 30, 30) !important;
}

And like Luke said this may no longer work with the next version. Perhaps there might be better solutions, but here I'm just offering you an idea. 

On 15/02/2024 at 06:44, Luke said:

I would suggest removing that custom css once you have the 4.8.2 maintenance release. An adjustment has already been made for this and you will no longer need it.

 

[syvcxm 23]

On 2/14/2024 at 6:36 PM, robbbin said:

Hey aikkie,

I've been troubled by the same problem in last few month until I found the solution below.

Add the following Custom css code in emby server settings, and save the changes.

.coveredImage {
    object-fit: cover;
}

The emby server version I use is 4.8.1.0

I have tested it in browser's desktop mode and TV mode, all work fine.

By the way, if you are fine with image crop, you can try using the Settings below, which will keep the 16:9 aspect ratio but without black border to the left and right.

.coveredImage {
    object-fit: contain;
}

Strangely, the CSS display effect I set is exactly the opposite of what you described.

When set as below, it display thumb as original aspect radio (4:3). and in terms of CSS semantics, 'contain' means that the image will be displayed in its entirety, without being stretched or cropped.

.coveredImage {
    object-fit: contain;
}

When set as below,  it display thumb as emby standard (16:9)

.coveredImage {
    object-fit: cover;
}

server version: 4.9.1.0 beta

Edited May 31, 2025 by syvcxm