Jump to content


Photo

About the ratio of the thumbnail


Best Answer BetaTester , 24 March 2020 - 07:16 PM

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.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:12 PM

Posted 24 March 2020 - 10:21 AM

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, 24 March 2020 - 10:23 AM.


#2 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:12 AM
  • LocationWashington State

Posted 24 March 2020 - 03:15 PM

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

 

5e7a5c4c8ac2b_console.jpg



#3 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 156731 posts
  • Local time: 03:12 AM

Posted 24 March 2020 - 03:21 PM

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



#4 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:12 PM

Posted 24 March 2020 - 05:11 PM

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, 24 March 2020 - 05:17 PM.


#5 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 156731 posts
  • Local time: 03:12 AM

Posted 24 March 2020 - 05:18 PM

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



#6 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:12 AM
  • LocationWashington State

Posted 24 March 2020 - 06:03 PM

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.



#7 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:12 PM

Posted 24 March 2020 - 07:16 PM   Best Answer

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, 24 March 2020 - 07:26 PM.


#8 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:12 AM
  • LocationWashington State

Posted 24 March 2020 - 07:39 PM

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.



#9 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:12 PM

Posted 25 March 2020 - 02:11 PM

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 -_-"



#10 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:12 AM
  • LocationWashington State

Posted 29 March 2020 - 09:00 PM

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}





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users