How can I show image in html markup and dynamic set size relative size of monitor ?

Question

I work with ASP.NET MVC project. How can I show image in html markup and dynamic set size relative size of monitor ? I show image on web-page, but I have case when image size more then monitor size and I need use scroll so see image. I can fix trouble with width, in my case I use JS script, but I don't fix the same trouble with height, I tried use: different JS scripts, set html and body tags height like 100%, set some styles for <img/> tag nad parent <div/> tag. But all cases don't work for me. In last case with css styles I can decrease size of image, but web-page size don't decrease and this incorrect size saved.

Image tag markup:

<div class="row">
<div id="sc-area" class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
    <div class="wrapper text-center">
        <img id="image" class="screen-shot" />
    </div>
</div>
</div>  

Different tries for fixing:

script1:

<script>
var imgElement = document.getElementById("image");
   imgElement.onload = function () {
        var img = this;
        var imgBounds = {
            height: img.clientHeight,
            width: img.clientWidth
        };
        var scrAreaWidth = document.getElementById("sc-area").clientWidth;
        var scrAreaHeight = document.getElementById("sc-area").clientHeight;
        if (imgBounds.width >= scrAreaWidth)
        {
            img.style.width = "100%";
        }
        if (imgBounds.height >= scrAreaHeight)
        {
            img.style.height = "100%";
        }
    };
</script>

script2:

<script>
	var imgElement = document.getElementById("image");
	var scrArea = document.getElementById("sc-area");
	imgElement.onload = function () {
	var scrAreaWidth = scrArea.clientWidth;
	var scrAreaHeight = scrArea.clientHeight;
	var imgWidth = imgElement.naturalWidth;
	var imgHeight = imgElement.naturalHeight;
	var widthRatio = scrAreaWidth / imgWidth;
	var heightRatio = scrAreaHeight / imgHeight;
	var scaleFactor = Math.min(widthRatio, heightRatio);
	imgElement.style.width = imgWidth * scaleFactor + "px";
	imgElement.style.height = imgHeight * scaleFactor + "px";  
</script>

Styles:

.container {
overflow: hidden;
height: 90%;
}

.container img {
object-fit: cover;
max-height: 90%;
}

Answer 1

unless one the .containers parents has set an absolute height, the height: 90% is meaningless as there is no value to take 90% of. while percent widths works, as html documents have no defined height, you have to define an absolute height to be able to use percents. you might be interested in viewport percents.

https://www.w3schools.com/cssref/css_units.php