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);