Question

我希望能够根据容器的大小（相对于封闭窗口的大小）实现css转换属性。

使用以下代码调用scaleCameraShutter()。使用重新编写的scaleCameraShutter()代码缩放确实，缩放是准确的。

这是唯一剩下的问题= window调整大小，container也是如此。然后，我重新加载窗口，正确的缩放完全消失。简而言之，缩放只是暂时的，而不是永久性的？

由于该委员会在代码上蓬勃发展，因此.css规范位于底部......

$(window).bind('resize', function() {

    scaleCameraShutter();  // below, container is GLOBAL

});

我打电话：

function scaleCameraShutter() {

    // .width() returns "###px"

    // value before scaling
    var containerWidth = parseInt( container.width() );   
    var windowWidth    = parseInt( $(window).width() );

    var theScale = windowWidth/containerWidth;
    var maxContainerWidth = 480;

    if (windowWidth > maxContainerWidth)
    {
        theScale = maxContainerWidth/containerWidth;
    }

    // Let the Browser pick the parm it accepts:
    // IE 10 and Firefox
    container.css("-transform"       , "scale(" + theScale + ", " + theScale + ")");
    // IE 9
    container.css("-ms-transform"    , "scale(" + theScale + ", " + theScale + ")");
    // Firefox
    container.css("-moz-transform"   , "scale(" + theScale + ", " + theScale + ")");
    // Chrome and Safari
    container.css("-webkit-transform", "scale(" + theScale + ", " + theScale + ")");
    // Opera
    container.css("-o-transform"     , "scale(" + theScale + ", " + theScale + ")");

}

最后，这是css：

#container {
    position:  relative;

    margin:    0 auto;
    width:     30.00em;
    height:    22.50em;

}

Answer 1

据我所知，您只向SCALE传递了一个值。尝试执行以下操作之一： scale（x，y）定义2D比例变换
scale3d（x，y，z）定义3D比例变换
scaleX（x）通过给出X轴的值来定义比例变换 scaleY（y）通过给出Y轴的值来定义比例变换 scaleZ（z）通过给出Z轴的值

来定义3D比例变换

http://www.w3schools.com/cssref/css3_pr_transform.asp

祝你好运。

css样式转换

1 个答案: