Как в jQuery изменить размеры изображения пропорционально?

группа изображений выводится в див... все изображения разного размера... т.е. могут попасть и 150 х 30, и 90 х 160.
Нужно чтобы все они изменились пропорционально до 60px по макс стороне. Возможно ли их изменить так для каждой картинки, чтобы картинка 150 х 30 пропорционально уменьшилась по высоте до 60, а 90 х 160 - по ширине???
0
img jquery jquery-ui resize

1 ответов

Мне кажется, можно использовать что-то подобное:


$('#div_id>img').each(function(){   //Здесь нужно поставить подходящий селектор
   var img=$(this);   //объект с картинкой
   if(img.width()>=img.height() && img.width()>60)       //Если ширина больше высоты и больше 60
         img.height(img.height()*60/img.width()).width(60);
   else if(img.height()>60)        //Если высота больше 60
         img.width(60/img.height()*img.width()).height(60);
});
 
3
http://jsfiddle.net/fPLf2/

Это умеет делать сам браузер. Стоит задать размер одной из сторон и он автоматический заресайзит картинку.
1

Как то надо было выровнять элементы привьювок фоток и видео в ленте, без потери пропорции, вот мое решение, может кому пригодится:


$('.photo_list li img, .video_list li img').each(
            function(){
                //width: 175px; height: 115px;
                var $this=$(this);
                var h=$this.height();
                var w=$this.width();
                var nh=115;   //высота до которой нужно масштабировать
                var nw=175;  //ну и ширина
                var k1=nh/nw;
                var k2=h/w;

                if (k1>k2)
                {
                    h=h*(nw/w);
                    w=nw;
                } else {
                    w=w*(nh/h);
                    h=nh;
                }
                $this.width(w);
                $this.height(h);
                if (h<nh) //Если картинка была слишком широкой, то при пропорциональном сжатии теряем в высоте, знач нужно выровнять по высоте
                {
                    $this.css('margin-top',(nh-h)/2);
                }
            }
        );
 
0

Написал как плагин для jQuery


jQuery.fn.imageResize = function(options) {
   
  var options = jQuery.extend({
    'width'   : 600,
    'height' : 480
    }, options);
   
  return this.each(function() {
   
    var $img  = jQuery(this);
    var $width  = $img.width();
    var $height  = $img.height();    
   
    if ($width >= $height  &&  $width > options.width) { //Если ширина больше высоты и больше максимальной ширины
      $img.attr({
        'width'  : options.width
        });
     
    } else if ($height > options.height) { // если высота больше максимальной
      $img.attr({
        'height' : options.height,
        });
      }
   
    });
  };
 
0