将图像的比例从 100vh 设置为 100% 宽度

Question

我正在尝试为图像的缩放设置动画。我已经这样设置了第一个实例：

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

单击一下，我将类更改为：

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

我想在这里创建过渡：

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

不幸的是，这不起作用，因为我从基于高度的限制变为基于宽度的限制。 有谁知道如何平滑地制作动画？现在它只是跳跃。

谢谢！

我在这里创建了一个示例小提琴：https://jsfiddle.net/possible/d067634v/

Answer 1

您可以使用 max-height 属性来使用一些技巧：

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

看这里：https://jsfiddle.net/aLtn2nf2/