[FEATURE] SfCategoryCard, show image without crop

[barisdemirezen]

trafficstars

Describe how this feature will help us improve SfCategoryCard component crops the background image. We can add some styling to prevent this cropping on images that should be completely visible.

Is your proposal related to a problem? It is not related to any problem.

Describe the solution you'd considered I have managed to solve this cropping problem with adding 3 lines of css to my code. background-position: top !important; background-size: 60% !important; background-repeat: no-repeat !important; Here is before and after image. Before After

Possible Errors If user would like to use an image with full width to cover container, this kind of visual can be seen.

Additional context I know adding these 3 css line is not a really good way to work in all situations but maybe something other that helps image to fit container and end at the top of "green text container"

By the way, it's my first contribution to open source, sorry if I made any mistake. Thanks for storefront-ui, I love it ❤️

┆Issue is synchronized with this Jira Zadanie by Unito

[Baroshem]

Hey @barisdemirezen

Thanks for reaching 😃

Your feature request looks promising, Category Cards look better in my opinion if they show full product image instead of cropped one.

Your proposed solution works, but there are probably better ways of achieving similar results. Maybe you could dig into the Storefront UI code, try to develop this solution and create a pull request? We would be happy to review it and give you some hints 😄

[barisdemirezen]

Hi @Baroshem, I'm glad you liked it. I may try to find a way to add this functionality with a prop. Like fullscreen prop. <somecomponent someprop fullscreen> Thanks for review, I'll definetely create a PR for this. See you soon

[AdamPawlinski]

Hi @barisdemirezen thanks for your contribution to this feature. Would you mind if I close this issue, anyway? Currently, we are focused on new version of SFUI and older one is in LTS phase so we do not add new features. Please look at the new one, and don't hesitate if you want to contribute or give us feedback.

[barisdemirezen]

Hi @AdamPawlinski sure go ahead. I will check the new version.

[AdamPawlinski]

@barisdemirezen Thanks, nice to hear that. I look forward to hearing your thoughts, perhaps on our discord channel