How to prevent an iframe from re-sizing when zooming

Question

I've read similar issues on this but no one seems to have an answer. I have an iframe where I am loading an image. When I zoom the iframe becomes bigger or smaller. Is there a way to prevent the iframe from zoooming or a way to keep the ratio when zooming?

I got it working for an image but can seem to get it to work for when I use an iframe

JS

var iframeDimensions = document.getElementById('mobile-iframe');
var iwidth = iframeDimensions.clientWidth;
var iheight = iframeDimensions.clientHeight;



$(window).resize(function(){

    var device = detectZoom.device();

    newWidth = iwidth / device;
    newHeight = iheight / device;


    $(iframeDimensions).attr('width', newWidth);
    $(iframeDimensions).attr('height', newHeight);

    var winW = document.body.offsetWidth;


    console.log('zoom level: '+device);
    console.log('new width: '+newWidth+'px');
    console.log('new height: '+newHeight+'px');
    console.log('offsetWidth '+winW);
    console.log('scale '+ winW / newWidth);




    //$('iframe').css('-webkit-transform', 'scale(' + (device + ", " + device) + ')')
    $('iframe').width();
   //$('iframe').css('-webkit-transform', 'scale(1)');



});

HTML

<iframe id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" height="210" frameborder="0"></iframe>

Answer 1

Solution with JS:

take a look at this How to detect page zoom level in all modern browsers? for example to detect the browser zoom level and then multiply the width and height of your iframe with the inverse value so in the end they visually stay the same.

Example: zoom level is 1 (Standard): width: 100px; height: 50px; zoom level is 2: width: 50px; height: 25px; -> Browser shows it double the size so it stays the same

just added: I still wouldn't recommend doing it due to usability ;)