CODEWITHSUNDEEP
jquerycssfirefoxcross-browserzooming
jstacks
jstacks

Reputation: 2437

CSS zoom - can only get this (jQuery) script to work in Chrome

I am using CSS zoom to zoom the outer container to match either the height or width (depending on browser window aspect ratio). It works perfectly in Google Chrome. I don't even need to use a '*' selector because I suppose the CSS zoom property automatically zooms all the children.

I can't seem to get it to work in Firefox or IE though (I haven't tried on any other browser.

I have tried '-moz-transform:scale' in Firefox... but couldn't get that working either.

Any and all help appreciated. Thanks!

$(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)});


    }

});

Upvotes: 0

Views: 1183

Answers (1)

Godwin
Godwin

Reputation: 9907

The zoom property isn't supported by all browsers (as you've discovered). Try also adding the transform: scale(%) property.

You will have to include all the variants for each browser, here is a good list of those variants.

Upvotes: 2

Related Questions