How do I stop the Category Logo Image from resizing?

As you can see below, before saving the category it looks nice. Upon saving it, it blows up and looks bad. Is there a setting I am missing?

1 2

Inspect elementing it shows that style="--aspect-ratio: 1.3333333333333333;" is responsible for the distortion. Both on the category itself and on the homepage.

Any help to this? It’s still doing it on the default theme.

Hmm, still haven’t found a solution.

In both pages maximum height of the category images are set to 150px by default. You can adjust it using the custom CSS.

.category-logo.aspect-image {
  --max-height: 36px;
  --max-width: 36px;
}
4 Likes

Good to know. Thanks! How do I manage this when the images are potentially different sizes and I don’t want them to scale at all? The effects I put on the images will look bad if scaled up or down. Or is your code just saying that it can be a max height and width of 36px?

Hey @vinothkannans, just want to make sure this is also a good way to do it. It seems to work great because all of my images are slightly different sizes but I’m a css noob.
.category-logo.aspect-image { --max-height: initial; --max-width: initial; }

Edit: Hm, on desktop it looks great but on mobile its blown out of proportions. I guess not. Not sure if that is fixable but if it isn’t, is there a way to just hide them on mobile?

3 Likes

Sure, you can hide using the CSS below. Remember to put it on mobile section of theme customization.

.category-logo.aspect-image { display: none; }
2 Likes

How to increase the size of the Category box image?

Having the same problem now that I enabled this in a category. The images are again scaled and make them look bad. What is the point of automatically scaling things? I can understand it for cases when I upload an image that is 400x400 and it’d destroy the entire page but my images are around 48x48. They’re scaling them to 40x40, which distorts them. Annoying.

image

Seems like these 2 are responsible for the resizing.