0

我正在使用 CSS 缩放来缩放外部容器以匹配高度或宽度（取决于浏览器窗口的纵横比）。它在谷歌浏览器中完美运行。我什至不需要使用“*”选择器，因为我认为 CSS 缩放属性会自动缩放所有子项。

我似乎无法让它在 Firefox 或 IE 中运行（我没有在任何其他浏览器上尝试过。

我在 Firefox 中尝试过'-moz-transform:scale' ......但也无法让它工作。

任何和所有的帮助表示赞赏。谢谢！

$(document).ready(function() {

var videoAspect= 480/270;/* normalWidth/normalHeight*/

var $window = $(window), windowW= $window.width(), windowH= $window.height();
var windowAspect= windowW/windowH;

if( windowAspect > videoAspect){
   /*  need height of window divided by container height = zoom amount */
    $('#wrapper').css({'zoom': windowH / (270*2)});


    }else{
        /*  need width of window divided by container zoom = zoom amount */ 
        $('#wrapper').css({'zoom': windowW / (480*2)});

        }

    });

    $(window).resize(function() {

        var videoAspect= 480/270;/* normalWidth/normalHeight*/

        var $win

dow = $(window), windowW= $window.width(), windowH= $window.height();
    var windowAspect= windowW/windowH;

    if( windowAspect > videoAspect){
       /*  need height of window divided by container height = zoom amount */
        $('#wrapper').css({'zoom': windowH / (270*2)});

    }else{
        /*  need width of window divided by container zoom = zoom amount */ 
        $('#wrapper').css({'zoom': windowW / (480*2)});


    }

});
4

1 回答 1

2

并非所有浏览器都支持 zoom 属性（如您所见）。尝试添加transform: scale(%)属性。

您必须包含每个浏览器的所有变体，这里是这些变体的一个很好的列表。

于 2013-04-11T04:10:28.560 回答