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

使用jquery调整图像大小

1 个答案: