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

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

1 个答案: