resizing image using jquery
<p>html </p>

<pre><code>&lt;div id="inside"&gt;&lt;div id="inside1"&gt;&lt;img id="inner_images" src="1.jpg"  alt=""/&gt;&lt;/div&gt;&lt;span&gt;photo details&lt;/span&gt;&lt;/div&gt;
  &lt;div id="inside"&gt;&lt;div id="inside1"&gt;&lt;img id="inner_images" src="2.jpg"  alt=""/&gt;&lt;/div&gt;&lt;span&gt;photo details&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>this is the html code for two images , likewise i have to create a gallery with lot of images.</p>

<p>CSS</p>

<pre><code>#inner_images {display:block; margin-left:auto; margin-right:auto; margin-top:auto;}
#inside {overflow: hidden; display:inline; width: 265px; height:340px; border: #8c8585 `solid 1px; padding:0; spacing:0;}
#inside1 {width:250px; height:250px; border-bottom: #8c8585 solid 1px ; }
#details {width:250px; height:90px;}
</code></pre>

<p>and jquery is</p>

<pre><code>var max_h =250;
var max_w =250;
$(document).ready(function()
{
   $('img#inner_images').load(function()
   {
      var w1=$(this).width();
      var h1=$(this).height();


     if(h1&gt;w1)
     {
        w1=Math.ceil(w1/h1*max_h);
        h1=max_h;
      }
       if(w1&gt;h1)
      {
         h1=Math.ceil(h1/w1*max_w);
          w1=max_w;
      }
    $(this).css({height:h1, width:w1});
   });


});
</code></pre>

<p>the problem is that this code only resizes the first image and rest of the image is left as it is.</p>

<p>`</p>
