BetaTester 0 Posted March 24, 2020 Share Posted March 24, 2020 (edited) Hello. My thumbails at the movie section are auto resized for some reasons. It supposes like this: But it is changed to something like this: 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 March 24, 2020 by BetaTester Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted March 24, 2020 Share Posted March 24, 2020 All you have to do is look in the browser console. Link to comment Share on other sites More sharing options...
Luke 36878 Posted March 24, 2020 Share Posted March 24, 2020 Is the aspect ratio preserved? It doesn't look distorted to me. Link to comment Share on other sites More sharing options...
BetaTester 0 Posted March 24, 2020 Author Share Posted March 24, 2020 (edited) 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. 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 March 24, 2020 by BetaTester Link to comment Share on other sites More sharing options...
Luke 36878 Posted March 24, 2020 Share Posted March 24, 2020 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 More sharing options...
Happy2Play 8138 Posted March 24, 2020 Share Posted March 24, 2020 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 More sharing options...
Solution BetaTester 0 Posted March 24, 2020 Author Solution Share Posted March 24, 2020 (edited) 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 March 24, 2020 by BetaTester Link to comment Share on other sites More sharing options...
Happy2Play 8138 Posted March 24, 2020 Share Posted March 24, 2020 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 More sharing options...
BetaTester 0 Posted March 25, 2020 Author Share Posted March 25, 2020 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 More sharing options...
Happy2Play 8138 Posted March 30, 2020 Share Posted March 30, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now