Jump to content

About the ratio of the thumbnail


BetaTester
Go to solution Solved by BetaTester,

Recommended Posts

BetaTester

Hello. My thumbails at the movie section are auto resized for some reasons. 

It supposes like this:

 

8kZyvrE.jpg

 

But it is changed to something like this:

 

eUfKOfR.png

 

I am not sure if the width is decreased or the height is increased..

How can I fix it by css? or what is the name of that class?

 

Thanks :)

Edited by BetaTester
Link to comment
Share on other sites

Happy2Play

All you have to do is look in the browser console.

 

5e7a5c4c8ac2b_console.jpg

Link to comment
Share on other sites

BetaTester

Is the aspect ratio preserved? It doesn't look distorted to me.

 

My original image was 378x537 and the emby thumbnail is 234x350 after imported.

If I rescale the thumbnail to 378 width, the height becomes 565 which means it is ~30px extended.

 

The face is a bit stretched.It is not obvious on the image above.

It is obvious when the face covers a large area.

 

 

All you have to do is look in the browser console.

 

5e7a5c4c8ac2b_console.jpg

 

omg, sorry I tried but I cant find it. Any pro tips please lol I meant the thumbnails at the large movie section, 10 images per row. I can only spot the css of the top menu and scrollers there. 

Edited by BetaTester
Link to comment
Share on other sites

Ok thanks for the info. We'll look at improving that to make sure aspect ratio is preserved.

Link to comment
Share on other sites

Happy2Play

My original image was 378x537 and the emby thumbnail is 234x350 after imported.

If I rescale the thumbnail to 378 width, the height becomes 565 which means it is ~30px extended.

 

The face is a bit stretched.It is not obvious on the image above.

It is obvious when the face covers a large area.

 

 

 

omg, sorry I tried but I cant find it. Any pro tips please lol I meant the thumbnails at the large movie section, 10 images per row. I can only spot the css of the top menu and scrollers there. 

Okay you are talking about the stretch to fit.

original code

.coveredImage {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;

personally I use this to stop the stretching, this eliminates the stretch everywhere.

button.coveredImage {
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: top;
}

If this is not what you are talking about, I guess I will need a better example.

Link to comment
Share on other sites

  • Solution
BetaTester

Okay you are talking about the stretch to fit.

original code

.coveredImage {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;

personally I use this to stop the stretching, this eliminates the stretch everywhere.

button.coveredImage {
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: top;
}

If this is not what you are talking about, I guess I will need a better example.

 

The script works! The image stops scretching now.

 

However, there is another problem lol https://i.imgur.com/iqICRBO.png

A grey bar spawns at the bottom since the image is smaller than the container.

Any clue? I tried to reduce the size of the background but the result is worse.

Edited by BetaTester
Link to comment
Share on other sites

Happy2Play

The script works! The image stops scretching now.

 

However, there is another problem lol https://i.imgur.com/iqICRBO.png

A grey bar spawns at the bottom since the image is smaller than the container.

Any clue? I tried to reduce the size of the background but the result is worse.

You have to choose.  The original code adjusts the image to fit the container.  Custom code prevents the stretch to fit.

 

Otherwise you have to adjust your images to proper aspect ratios 2:3.

Link to comment
Share on other sites

BetaTester

You have to choose.  The original code adjusts the image to fit the container.  Custom code prevents the stretch to fit.

 

Otherwise you have to adjust your images to proper aspect ratios 2:3.

 

Ok thanks. Just figured out that mystery 30 px is reserved for the Coverart -_-"

Link to comment
Share on other sites

Happy2Play

The script works! The image stops scretching now.

 

However, there is another problem lol https://i.imgur.com/iqICRBO.png

A grey bar spawns at the bottom since the image is smaller than the container.

Any clue? I tried to reduce the size of the background but the result is worse.

 

 

You have to choose.  The original code adjusts the image to fit the container.  Custom code prevents the stretch to fit.

 

Otherwise you have to adjust your images to proper aspect ratios 2:3.

 

Correction you can remove the bottom placeholder background if you wish.  But will see the image offset on the bottom do to aspect ratio irregularities and make all people placeholders with no image transparent.

button.cardContent-shadow {background-color: transparent}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...