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
});
}
2
Answers
You could use the
zoom
CSS property on the iframe.You can try the following snippet by clicking on "Run snippet", "Full page" and then resizing your window:
I like the answer by @blex, but on my Mac it only works in Chrome, not in Safari or Firefox. I have come up with this solution based on both his answer and this excellent answer by @MrP01. It uses
transform: scale()
instead ofzoom
. This works on all browsers on my Mac.After you run this snippet, use the full page link to test the responsive behaviour.