jquery - Jssor 按容器的高度和宽度比例缩放

Question

四处搜索，我只发现人们要么按高度缩放，要么按宽度缩放，我可以这样做，但我需要两者都做。

我的图库容器是按百分比设置的，但我认为这无关紧要。

基本上我希望我的 jssor 画廊根据它的容器尺寸进行调整。

在这里查看全屏解决方案http://www.jssor.com/testcase/full-screen-slider.source.html它作为一个 JS 错误，所以它不起作用。

现在我按高度缩放，这在一定程度上起作用，但是随着宽度变小，图片库将在一些较小的宽度上被切断(因为容器有溢出:隐藏)，因为它正在根据容器保持比例但不考虑容器的宽度，本质上宽度比容器宽度长。

function ScaleSlider() {

var parentHeight = jssor_slider1.$Elmt.parentNode.clientHeight;

if (parentHeight) {

    if ((parentHeight - 70) > 0) {

        parentHeight = parentHeight - 70;

    }


    var sliderOriginalWidth = jssor_slider1.$OriginalWidth();

    var sliderOriginalHeight = jssor_slider1.$OriginalHeight();

    var newWidthToFitParentContainer = parentHeight / sliderOriginalHeight * sliderOriginalWidth;


    jssor_slider1.$ScaleWidth(newWidthToFitParentContainer);
}
else
    window.setTimeout(ScaleSlider, 30);


}

Answer 1

好吧，既然 JSSOR 已经说过这里没有当前的解决方案，这就是我同时所做的。

按高度缩放时，您还必须检测画廊的宽度是否会超过其容器并改为按宽度计算。

var parentHeight = jssor_slider1.$Elmt.parentNode.clientHeight;

                if (parentHeight) {


                    var sliderOriginalWidth = jssor_slider1.$OriginalWidth();

                    var sliderOriginalHeight = jssor_slider1.$OriginalHeight();

                    var newWidthToFitParentContainer = parentHeight / sliderOriginalHeight * sliderOriginalWidth;

        if (newWidthToFitParentContainer > jssor_slider1.$Elmt.parentNode.clientWidth) {

            //scale differently if the width of the slider is greater than the parent

            jssor_slider1.$ScaleWidth(jssor_slider1.$Elmt.parentNode.clientWidth-30);


        }
        else {

            jssor_slider1.$ScaleWidth(newWidthToFitParentContainer);

        }
                }
                else
                    window.setTimeout(ScaleSlider, 30);