自动调整固定图像大小，以适应内容

Question

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

关于什么是这样做的好方法的任何想法？如果我只是将图像设置为：

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

它首先起作用，但在较小的屏幕上，图像只覆盖上面的div。 在图像上设置max-height也不起作用，因为图像上方的div有时覆盖40％的屏幕，有时覆盖80％的屏幕。

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

Answer 1

试试这个：

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