Javascript 如何使用检测到的浏览器缩放级别保持Iframe'；s宽度和高度相同

我试图保持iframe的大小不变，无论用户在浏览器中放大了多少。我让它通过根据缩放级别调整宽度来处理图像。但似乎无法让它与iframe一起工作。真正重新调整iframe大小的唯一方法是使用“变换比例”。我使用这个插件来计算缩放

javascript

/*get the value of the image width and height*/

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

$(window).resize(function() {
    var device = detectZoom.device();
    console.log(device);
    newWidth = iwidth / device;
    console.log(newWidth+'px');
    $(iframeDimensions).attr('width', newWidth);
    //I would get the iframe to resize  useing this line of code but what is the best way of using this with scale ? 
    $('iframe').css('-webkit-transform', 'scale(' + (document.body.offsetWidth / newWidth) + ')');
});

HTML

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

---

我阅读了该线程，并能够解决部分问题，但可能存在重复。但我现在遇到的问题有点不同，因为计算缩放级别不是我的问题@卢法马