css style transform

Question

Я хотел иметь возможность реализовать свойство преобразования css в зависимости от размера контейнера относительно размера закрывающего окна.

Со ссылкой на следующий код, scaleCameraShutter(). Масштабирование происходит с переписанным кодом для scaleCameraShutter(), и масштабирование является точным.

Вот остающаяся проблема = window изменяет размеры, а также container. THEN, я делаю перезагрузку окна, и правильное масштабирование полностью исчезает. Короче говоря, масштабирование является лишь временным, а не постоянным?

Поскольку Совет преуспевает на коде, в .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. Попробуйте выполнить одно из следующих действий: масштаб (x, y) Определяет преобразование 2D-шкалы
scale3d (x, y, z) Определяет преобразование трехмерного масштаба
scaleX (x) Определяет масштабное преобразование, задавая значение для ось Х
ScaleY (у) Определяет масштабное преобразование, давая значение для оси Y.
scaleZ (г) Определяет 3D масштабное преобразование, давая значение для Z-оси

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

удачи.