調整圖像使用jQuery

Question

HTML

<div id="inside"><div id="inside1"><img id="inner_images" src="1.jpg" alt=""/></div><span>photo details</span></div> 
    <div id="inside"><div id="inside1"><img id="inner_images" src="2.jpg" alt=""/></div><span>photo details</span></div> 

這是兩個圖像的HTML代碼，同樣我要創建有大量的圖像畫廊。

CSS

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

和jQuery是

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>w1) 
    { 
     w1=Math.ceil(w1/h1*max_h); 
     h1=max_h; 
     } 
     if(w1>h1) 
     { 
     h1=Math.ceil(h1/w1*max_w); 
      w1=max_w; 
     } 
    $(this).css({height:h1, width:w1}); 
    }); 


}); 

的問題是，這種代碼只調整大小的第一圖像和圖像的剩餘部分保持原樣。

`

Answer 1

$('img#inner_images').each(function() 
    { 
     var w1=$(this).width(); 
     var h1=$(this).height(); 


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