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

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

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

1 个答案: