trying to fit image in viewport

[BlobZ]

I'm trying to force an image to be displayed totally within a viewport maximizing either the width(landscape picture) or height(portrait picture) so that the picture is always fully displayed. Can anyone provide HTML/CSS to achieve this.  My pictures are larger than the viewport so always need shrinking.

Thanks

 

[Ingolme]

This should work:

display: block;
max-width: 100vw;
max-height: 100vh;
width: auto;
height: auto;

The element containing the image should take up the full size of the window for this to work correctly.