jssor尺寸调节器，不保持纵横比

Question

由于我们组织的一位客户要求我们稍微更改幻灯片放映高度而不是宽度（在小屏幕设备中保持宽高比的原因是滑块非常小）。

我知道这个jssor函数$ScaleWidth(width);但只需调整高度。

因此，基于jssor实例化对象的标记id的transform css属性的缩放值创建了以下函数来调整大小，该属性作为以下函数的参数传递。

function jssorResolutionAdjustor(id)
    {
        setTimeout(function() {

            var idObj = $('#' + id);
            var immediateChild = idObj.children('div');
            var transformMatrix = '';
            var transformMatrixValues = '';
            var transformCss = '';
            transformMatrix = immediateChild.css('transform');

            transformMatrixValues = transformMatrix.match(/-?[\d\.]+/g);

            var scaleXValue = transformMatrixValues[0];
            var scaleXValueFixed = parseFloat(scaleXValue).toFixed(2);
            var scaleYValue = (scaleXValue * 1.2).toFixed(2);

            if (scaleXValueFixed >= 0.75)
            {
                scaleYValue = 1;
            }

            if ('WebkitTransform' in document.body.style)
            {
                transformCss = {'-webkit-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')',
                    'transform': ''};
            }
            else if ('MozTransform' in document.body.style)
            {
                transformCss = {'-moz-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
            }
            else if ('transform' in document.body.style)
            {
                transformCss = {'tansform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
            }

            $(immediateChild).css(transformCss);

        }, 0);
    }

它在桌面浏览器中完美运行（firefox，我只检查了chrome），但如果在手机上打开（iphone，android）意味着它的尺寸太大了。此外，我通过将浏览器屏幕大小调整为手机屏幕大小来检查移动和桌面中的值，并在alert('scaleXValue=' + scaleXValue + '<-->' + 'scaleXValueFixed=' + scaleXValueFixed + '<-->' + 'scaleYValue=' + scaleYValue);中返回相同的值。

我无法得到任何线索所以在这里我附上移动设备中失败解决方案的屏幕截图。

我在加载和调整窗口大小时调用此函数。

jssorResolutionAdjustor('jssor_image_gallery');
$(window).resize(function() {
    jssorResolutionAdjustor('jssor_image_gallery');
});

jssor_image_gallery是jssor实例中给出的id

jssor_slider_image = new $JssorSlider$('jssor_image_gallery', options);

更新（1）：

这是我的jssor函数

function imageJssor()
{
    var _CaptionTransitions = [];
    _CaptionTransitions["MCLIP|B"] = {$Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo};

    var options = {
        $AutoPlay: false,
        $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $ChanceToShow: 2,
            $Cols: 6,
            $Align: 260,
            $SpacingX: 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Steps: 6                                      //[Optional] Steps to go for each navigation request, default value is 1
            }
        },
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2
        },
        $CaptionSliderOptions: {//[Optional] Options which specifies how to animate caption
            $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
            $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
            $PlayInMode: 0, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
            $PlayOutMode: 0                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
        }
    };
    jssor_slider_image = new $JssorSlider$('jssor_image_gallery', options);

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizes
    function ScaleSlider() {
        /*  var windowWidth = $(window).width();

         if (windowWidth) {
         var windowHeight = $(window).height();
         var originalWidth = jssor_slider_image.$OriginalWidth();
         var originalHeight = jssor_slider_image.$OriginalHeight();

         var scaleWidth = windowWidth;
         if (originalWidth / windowWidth > originalHeight / windowHeight) {
         scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
         alert(scaleWidth);
         }

         jssor_slider_image.$ScaleWidth(scaleWidth);
         }
         else
         window.setTimeout(ScaleSlider, 30);

         var bodyWidth = document.body.clientWidth;
         alert(bodyWidth);
         if (bodyWidth)
         jssor_slider_image.$ScaleWidth(Math.min(bodyWidth-150, 1920));
         else
         window.setTimeout(ScaleSlider, 30);        */

        var parentWidth = jssor_slider_image.$Elmt.parentNode.clientWidth;
        //alert(parentWidth);
        if (parentWidth)
            jssor_slider_image.$ScaleWidth(Math.min(parentWidth, 720));
        else
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end
}


imageJssor();

$(document).on('click', '#one li', function() {
    var imageStartFrom = $(this).index();

    $('#image_gallery').hide();
    $('#jssor_image_gallery').show();

    jssor_slider_image.$PlayTo(imageStartFrom);
    jssor_slider_image.$Pause();

    jssorResolutionAdjustor('jssor_image_gallery');
    $(window).resize(function() {
        jssorResolutionAdjustor('jssor_image_gallery');
    });
});

更新（2）：

此处在两个图片（网络和移动设备）中，默认缩放比例和我的计算值或看起来相同，但如下图所示，它在桌面浏览器中的网站中正常工作，但在移动设备中无法正常工作。这里我附上了那张图片供参考。

在左侧的上图中，与从桌面浏览器中拍摄的右侧图像相比，鹿图像缩放到高位。

更新（3）： 请参阅下面的图像警告以验证parentWidth仅表示相同的值

另外我附上我的html dom结构，其中jssor中使用的id在蓝色背景中突出显示。

Answer 1

我找到了解决方案，如果设置-webkit-transform意味着清空transform css属性必须检查浏览器（gecko，webkit等）引擎也有transform。如果存在，则优先级将转换为transform，而渲染dom与-webkit-transform相比。

发件人：

if ('WebkitTransform' in document.body.style)
            {
                transformCss = {'-webkit-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')',
                    'transform': ''};
        }

以

if ('WebkitTransform' in document.body.style)
            {

                transformCss = {'-webkit-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};

                if ('transform' in document.body.style)
                {
                   transformCss = {'tansform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
                }
            }