Функция jQuery для изменения размера набора изображений в заданной области (не высота или ширина) - PullRequest
Новая
       17

Функция jQuery для изменения размера набора изображений в заданной области (не высота или ширина)

4 голосов
/ 21 ноября 2011

Я пытаюсь написать функцию jQuery, которая будет изменять размер набора изображений в соответствии с заданной областью, а не просто максимальной высотой или шириной.

Здесь есть похожий вопрос: изменить размер изображения по области , но я бы хотел, чтобы оно работало в jquery и с несколькими изображениями одновременно

Вот то, с чем я сейчас работаю: http://jsfiddle.net/szSE5/21/ - это не работает так, как я планировал в данный момент.

Ответы [ 2 ]

2 голосов
/ 21 ноября 2011

Как насчет этого: 

jQuery.fn.resizeImgByArea = function(avgDimension){
    var $this = $(this),
        oldW = $this.width(),
        oldH = $this.height(),
        RatiO = new Number(oldW/oldH),
        newH = new Number(Math.round(Math.sqrt(avgDimension/RatiO))),
        newW = new Number (Math.round(newH * RatiO));
    $this.css({
        width: newW + 'px',
        height: newH + 'px'
        });


}

$(document).ready(function() {
    $('#images img').each(function(){$(this).resizeImgByArea(10000)});
});
1 голос
/ 21 ноября 2011

В твоей скрипке: http://jsfiddle.net/szSE5/21/

jQuery.fn.resizeImgToArea = function(area) {
  this.each(function() {
    var imgElement = $(this);
    var originalWidth = imgElement.width();
    var originalHeight = imgElement.height();
    var aspectRatio = originalWidth / originalHeight;        
    var newHeight = Math.round(Math.sqrt(area/aspectRatio));
    var newWidth = Math.round(aspectRatio * newHeight);
    imgElement.width(newWidth);
    imgElement.height(newHeight);
  });
  return this;
};

На первый взгляд, ваше решение jsfiddle не работает, потому что «this» в вашем контексте является прямым элементом DOM, а не объектом jQuery.

...