I have this element with the following dimensions width: 90px height: 108px

Image 1

After rotating it's size "gets bigger"

Image 2

How can I scale it so it fits its container with any rotating angle?

Image 3

Code:

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);
  }
}

Ps: I'm using JSS, so any JavaScript solutions are also welcome.