How to resize an image so it is always the biggest possible without the being bigger than the window height OR than the window width?

Question

I have an image I want as big as possible, but I want 100% of the image visible no matter how the window is resized. I also want to maintain image ratio.

I have tried doing

img{
   width: 100vh;
}

but that will cut off some of the image depending on the size of the window.

Here are some examples of what I want:

When the width is restrictive

When the height is restrictive

Answer 1

You could try to set your image with screen size then use object-fit: cover to set image always fitting the container;

img{
   width: 100vw;
   height: 100vh;
   object-fit: contain;
}

Answer 2

Try the following, it will max out the width of the containing element and also use height auto to maintain the aspect ratio of the image(s)

img {
    width:100%;
    height:auto;
  }