Как-то делал функцию ресайза изображений в слайдере. Гляньте, может что полезное найдете. Кое-где даже комменты есть.
resizeImg: function (slide) {
slide = slide || this._slides[this._currentSlide];
var originImg,
newWidth = 0,
newHeight = 0,
$body = document.documentElement,
screenWidth = $body.clientWidth,
screenHeight = $body.clientHeight,
percent = 0.9;
/*
* Изменяем по ширине
*/
var resizeW = function (oH, oW) {
var originHeight = oH || 0,
originWidth = oW || 0;
this.$imgWrap.removeAttr('style');
newWidth = parseInt(screenWidth * percent, 10);
this.$imgWrap.
css({
width: newWidth,
height: parseInt((newWidth * originHeight)/originWidth)
});
}.bind(this);
/*
* Изменяем по высоте
*/
var resizeH = function (oH, oW) {
var originHeight = oH || 0,
originWidth = oW || 0;
this.$imgWrap.removeAttr('style');
newHeight = parseInt(screenHeight * percent, 10);
this.$imgWrap.css({
width: parseInt((newHeight * originWidth)/originHeight),
height: newHeight
});
}.bind(this);
// определяем оригинальный размер картинки
originImg = new Image();
originImg.onload = function () {
var $this = originImg,
originWidth = $this.width,
originHeight = $this.height,
modalWrap = $(this._modal.content()).find('.js-modal-comtent-wrap');
/*
* Если оригинал изображения меньше размера экрана
* оставляем его без изменений
*/
if (originWidth < screenWidth && originHeight < screenHeight) {
this.$imgWrap.css({
width: originWidth,
height: originHeight
});
modalWrap.css({
width: this.$imgWrap.width(),
'min-width': this.$imgWrap.width()
});
this.$img.
removeAttr('style').
css({
'min-width': '0',
width: originWidth,
height: originHeight
});
this.$nextSlideBtn.height(this.$img.height());
this.$prevSlideBtn.height(this.$img.height());
this._modal.update();
return;
}
/*
* Если оригинал изображения больше размера экрана,
* пробегаемся по условиям:
* если ширина оригинала >= ширине экрана
* то ресайз по ширине экрана
*
* если новая высота обертки >= высоте экрана
* то ресайз по высоте экрана
*
* или если высота оригинала >= высоте экрана
* то ресайз по высоте экрана
*
* если новая ширина обертки >= ширине экрана
* то ресайз по ширине экрана
*/
if (originWidth >= screenWidth * percent) {
resizeW(originHeight, originWidth);
if (this.$imgWrap.outerHeight(true) >= screenHeight * percent) {
resizeH(originHeight, originWidth);
}
} else if (originHeight >= screenHeight * percent) {
resizeH(originHeight, originWidth);
if (this.$imgWrap.outerWidth(true) >= screenWidth * percent) {
resizeW(originHeight, originWidth);
}
};
this.$img.
css({
'min-width': '0',
width: this.$imgWrap.width(),
height: this.$imgWrap.height()
});
this.$nextSlideBtn.height(this.$img.height());
this.$prevSlideBtn.height(this.$img.height());
modalWrap.css({
width: this.$imgWrap.width(),
'min-width': this.$imgWrap.width()
});
this._modal.update();
}.bind(this);
originImg.src = slide.src;
},