Automatically resize fixed image, to fit under content

Question

Okay, so I have a simple one page website, that has content in div at top, and then an image at bottom. This image needs to be fixed to bottom, and it needs to automatically resize to fit under the div above.

Any ideas on what would be a good way to do this? If I just set the image to:

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

it works at first, but on smaller screens, the image just covers the div above. Setting max-height on image doesnt work either, as the div above the image sometimes covers 40% of the screens, and other times it covers 80% of screen.

Any ideas at all on what else I can try?

Answer 1

Try this:

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