How to make image proportions in a slider?

Question

JavaScript

In the slider, all the pictures are of different formats egida.by/dir/30-1-0-5242
How can I make the 4th picture, for example, be the first in height and have a white background on the sides?

Answer 1

Somehow I did the function of resizing images in the slider. Take a look, you might find something useful. Some even have comments.

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

Oh, this disgusting yukoz ... And if we talk about the issue. I advise you to make all images the same width or height. Or set max. width or height.