Как сделать пропорции картинки в слайдере?

Question

[vvk996]

В слайдере все картинки разного формата egida.by/dir/30-1-0-5242
Как сделать чтобы например 4я картинка была как первая по высоте а по бокам белый фон был ?

Answer 1

[Maxim Nepritimov]

Как-то делал функцию ресайза изображений в слайдере. Гляньте, может что полезное найдете. Кое-где даже комменты есть.

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

Answer 2

[Archakov Dennis]

О, этот отвратительный юкоз... А если по вопросу говорить. То советую делать все изображения одной ширины или высоты. Или задать макс. ширину или высоту.