0
308
Viewsiframe Fits complete webpage as on Full HD Screen in to a small Window
In first Picture I have 6 iframes being loaded and each having its own HTML page. All pages in those iframes are responsive so they got adjust as per the size.
But I want to make it look like exactly the same those HTML pages would look in 1920x1080 resolution screen (shown in image 2)
Image 2 is the HTML page being loaded in the second row first iframe of Image 1
·
Juan Pablo Isaza
2 answers
Answer question0
You can set the high resolution to the frame by default and then zoom and scale it down to the required size.
All you have to do is calculate zoom/scale from starting width to required width. Which should be required width divided by starting width.
Source of the code with examples.
#your-frame {
width: 1920px;
height: 1080px;
}
#your-frame {
zoom: 0.50;
-moz-transform: scale(0.50);
-moz-transform-origin: 0 0;
-o-transform: scale(0.50);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.50);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#your-frame {
zoom: 1;
}
}
·
Juan Pablo Isaza
Report
0
You probably forgot to set the size to iframes. The code below helped me without any problems:
CSS Code:
div {
width: 31%;
height: 294px;
margin: 0 auto;
}
iframe {
width: -webkit-fill-available;
height: -webkit-fill-available;
overflow: hidden;
border: 0;
}
·
Juan Pablo Isaza
Report
Answer question