Animate the scale of an image from 100vh to 100% width

Question

i am trying to animate the scaling of an image. i have set the first instance like this:

section.workimage .image.fit img{
  height: calc(100vh - 5rem);
}

with a click i change the class to that:

section.workimage .image.fat img{
  height: auto;
  width: 100%;
}

and here i wanted to create the transition:

section.workimage .image img{
  transition: all .2s ease-in-out;
  width: auto;
}

unfortunately that doesn't work, since i change from a height based limitation to a width based. does anyone have an idea how to smoothly animate this? right now it just jumps.

thanks!

i have created an example fiddle here: https://jsfiddle.net/possible/d067634v/

Answer 1

You can use some trick using max-height propery :

section.workimage .image.fit img{
  height: calc(100vh - 5rem);
  max-height: calc(100vh);
}

section.workimage .image.fat img{
  height: auto;
  max-height: 1000px;
  width: 100%;
}

section.workimage .image img{
  transition: all .2s ease-in-out;
  width: auto;
}

Look here : https://jsfiddle.net/aLtn2nf2/