"How can I display an image in HTML and dynamically adjust its size relative to the screen?"

[Alex1347]

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%;
}

 

[Skydiver]

I'm failing to find how this is a C# question. Looks more like a HTML/CSS/JavaScript question, but oh well.

 

[Rythorian]

You can u

HTML:

<div id="content-1">
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
</div>
css

    #content-1 {display:flex; gap:0.5rem;}
    
    #content-1 > div {border: 1px solid grey;}
    
    #content-1 > div > img {width:100%;}

    @media screen and (max-width: 500px) {
        #content-1 {
        flex-direction: column;
       }
    }

se display:flex in your container. Wrap each image in a div then set the image width to 100% so it scales to fit each element.

 

[Rythorian]

Also: you can

#content-1 {
  height: 400px;
  width: auto;
  border-radius: 1px;
  border-style: solid;
}

.my-col {
  float: left;
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .my-col {
    width: 25%;
  }
}

.responsive {
  width: 100%;
  height: auto;
  display: block;
}
<div id="content-1">
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>

</div>
<!-- content-1 luk -->
<div style="clear:both"></div>
don't forget to clear floats

give each image width of 100%. It can be inside containers of width 25% each to have 4 in a row. You can use media query so that the containers would have width of 50% for smaller screens (<768px) so that there would be 2 in a row.

 

[Skydiver]

@Rythorian : The OP is not trying to evenly fit 4 images into a web page. They are trying to fit a single image to maximize the space taken, but at the same time take into account the monitor dimensions.