userstyles-world
Preview Images Aggressively Cropped
I've just started migrating over from UserStyles.org so I figured I'd report this as I go.
On both the regular and the 'redesigned' style view page, the preview image container has a hard-coded height. If the preview image or screenshot doesn't exactly match the aspect ratio of the container, it's cropped at the top and bottom, with no way to see the rest:
This can be fixed by removing align-items: center; from .card .screenshot picture in the CSS. Given that the screenshot container includes a blurred version, I assume this was the intended way to display it:
Browser: Firefox 134 on Windows
I assume this was the intended way to display it
It is. For small images. Not sure about the large ones.
Please note that Stylus crops previews even more aggressively, and USw crops previews in the listing (explore, search, etc) too, so you may want to stick to 16:9 with some vertical margin for content for good readability.
Yes, I saw that the USw listing previews are similarly cropped, although with those it aligns them at the top, cropping off the bottom of the picture. This makes more sense. Still worth doing the one-line change though, IMO. Not everyone will be aware of the cropping or know how to optimize their screenshots.
Huh, somehow it never occurred to me that I'm supposed to set the aspect ratio of my screenshots to 16:9 instead of fixing it on the client side (with my userstyle). After all, most users do see the screenshots from Stylus's popup...
@astyled I think the hint to use 16:9 images should be put on the Add page. It's rather important, if you have no plans to change the website's behavior.
