Question

I have a single image. I want to resize that image in a small window. How to stretch an image in a window by making it bigger image and smaller image.

Width and height attributes are not working properly.
I mean how to stretch an image by giving width and height as follows;

width=300px;height=300px
again width=600px;height=600px;
and width=900px;height=900px;
and widht=1800px;height=1800px;

Answer 1

Set the height to auto which will keep the ratio respective to the width. Also, HTML attributes don’t need the “px” units, that’s for CSS.

<img src="someimage.jpg" width="300" height="auto" alt="Some image">
<img src="someimage.jpg" width="600" height="auto" alt="Some image">
<img src="someimage.jpg" width="900" height="auto" alt="Some image">
<img src="someimage.jpg" width="1800" height="auto" alt="Some image">

You tagged this javascript. If you wanted to change the size with JavaScript, you would need to reference the image with an id first, and change the attributes after that.

<script>
  window.onload = function(){
    document.getElementById('testimg').width = 500;
  }
</script>

<img id="testimg" src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48.jpg" height="auto">

If you wanted the image to go larger or smaller with the window, like in a pop-up window, set the width to 100% and leave the height to auto. This will make the image conform to its containing element.