自动调整固定图像的大小以适合内容

Question

好的，所以我有一个简单的单页网站，其内容在div顶部，然后是图像。 该图像需要固定在底部，并且需要自动调整大小以适合上面的div。

关于什么是实现此目的的好方法的任何想法？ 如果我只是将图像设置为：

img {
    position: fixed;
    bottom: 0px;
}

首先可以使用，但在较小的屏幕上，图像仅覆盖上方的div。 在图像上设置最大高度也不起作用，因为图像上方的div有时会覆盖40％的屏幕，而有时它会覆盖80％的屏幕。

关于我还能尝试什么的任何想法？

Answer 1

尝试这个：

img {
  position: fixed;
  bottom: 0px;
  height: calc(100vh - 50px); # replace 50px with your "div above" height
}