Redimensionar banners de categoria

[PaulinaMX (ForosMX)]

Após a atualização do fórum, os banners de categoria na versão mobile saem da caixa, imagino que consertar o tamanho dos banners possa resolver.

Alguém poderia me ajudar, por favor?

Agradeço desde já.

[PaulinaMX (ForosMX)]

[Don]

Olá,

Acho que a causa é este CSS

.category-logo.aspect-image {
  width: calc(var(--max-height) * var(--aspect-ratio));
}

Aqui, a max-height é de 150px e a aspect-ratio depende da imagem. Isso significa que se você tiver uma imagem com proporção 6…, ela terá uma imagem de 150 x 6 = 900px de largura. Portanto, depende da proporção da imagem.

Mas você pode substituir este cálculo… (não este, mas ele será afetado) com o seguinte.
Adicione uma max-width fixa à imagem. Assim, a imagem não pode ser mais larga que este valor.
Adicione o seguinte à seção de CSS para dispositivos móveis.

.category-list .category-logo.aspect-image {
  max-width: 250px;
}

---

Ou você pode tentar algo como isto para dispositivos móveis. Ele calculará a largura máxima da viewport e alinhará a imagem a ela.

.category-list .category-logo.aspect-image {
  max-width: calc(100vw - 2.5em);
}

[PaulinaMX (ForosMX)]

Muito obrigado @Don Agora ficou ótimo!