自動調整固定圖像的大小以適合內容

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
}