Problem trying to show an iframe of a website that scales

I am trying to create a website that will show an iframe on the site, which has a panel at the side of it. The main thing that i need is for the iframe to render the website as if it was on a 1920px monitor, regardless of the resolution used by the website viewer. I have attached a few quick mockup images to try explain this, as you can see, when the user drags the window, the iframe site will shrink but keep the same proportions width wise, and scale out, so you can see more of the site at the bottom. Therfore if the user was using 1368×768 as you can see in the other mockup, they would still see how the website would be rendered at 1920px .

I apologise if this is confusing, i have been trying for the last 2 days, but i can never get it to constantly fill the container in which the iframe is in, there are always gaps, or it doesnt scale, or reverts to tablet/mobile versions, all of which i am trying to avoid.

Does anybody have any advice for me, any pointers in which I can try, really appreciate any help

How it should look on a 1920×1080 monitor

How it should look on a 1920×1080 monitor if shrunk in

How it should look on 1368×768 resolution

In terms of code i have tried so many things, the most “successful” is using js, this is what i did, but it didnt work as i liked.

function adjustIframeScale() {
if (iframe && container) {
    const containerWidth = container.getBoundingClientRect().width;
    const scale = (containerWidth * 2) / 1920;
    
    iframe.style.transform = `scale(${scale})`;
    iframe.style.transformOrigin = '0 0';
    
    container.style.height = `${1080 * scale}px`;
    
    // Log values for debugging
    console.log('Scale values:', {
        containerWidth,
        scale,
        scaledHeight: 1080 * scale
    });
}