Home/ Questions/Q 6687049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:14:33+00:00

I want to resize images depend on its size in CSS with JS function

  • 0

I want to resize images depend on its size in CSS with JS function which get all images in the div but i am facing problems with getelement by tagname which i have to set the images styles into the img HTML tag or its never work , in this test project its easy to do but in my real one there is many images into this div and many pages so here the function and its HTML 

<script type="text/javascript">
function x() {
    var yourdiv = document.getElementById('test');
    var yourImgs = yourdiv.getElementsByTagName('img');
    for (var i = 0; i < yourImgs.length; i++) {
        if (yourImgs[i].style.height == '1000px' && yourImgs[i].style.width == '1000px')
          {
               yourImgs[i].style.height = '700px';
                yourImgs[i].style.width = '800px';
          }
        else
          {
             yourImgs[i].style.height = '400px';
                yourImgs[i].style.width = '300px';
          }

    }
}
window.onload= x;
</script>
</head>
   <body>
      <div  id="test">
         <img alt=''  class="test_img" style="height:1000px;width: 1000px;"   src='imges/book1.jpg' />
         <img alt='' class="test_img" style="height:1000px;width: 1000px;"  src='imges/book2.jpg' />
      </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ignore style and just check for height and width like in this example:

    http://jsfiddle.net/5yjfy/2/

    function x() {
    var yourdiv = document.getElementById('test');
    var yourImgs = yourdiv.getElementsByTagName('img');
    for (var i = 0; i < yourImgs.length; i++) {
        if (yourImgs[i].height == 1000 && yourImgs[i].width == 1000)
          {
               yourImgs[i].style.height = '700px';
                yourImgs[i].style.width = '800px';
          }
        else
          {
             yourImgs[i].style.height = '400px';
                yourImgs[i].style.width = '300px';
          }

    } } window.onload= x;
    • 0