Tengo este elemento con las siguientes dimensiones width: 90px height: 108px

Imagen 1

Después de rotar su tamaño "se vuelve más grande"

Imagen 2

¿Cómo puedo escalarlo para que se ajuste a su contenedor con cualquier ángulo de rotación?

Imagen 3

Código:

 figure { grid-area: image; position: relative; transform: rotate(-12deg); width: min(50vw, 90px); height: min(60vw, 108px); img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 1.2rem; border: 6px solid var(--white); } }

PD: estoy usando JSS, por lo que cualquier solución de JavaScript también es bienvenida.