Disable to wrap for iframes-CodePudding

I want/need to create a dashboard, which shows four different screens. So far I tried solving it by simply including the "displays" per iframes:

<style>
    iframe {
        width: 1920px;
        height: 1080px;
        display: inline;
        vertical-align: top;        
    }
</style>


<iframe src="display1" ></iframe>
<iframe src="display2" ></iframe>
<iframe src="display3"></iframe>
<iframe src="display4"></iframe>

Now I have the problem, that the browserwindow always stacks the windows vertically, because they're slightly too large. I want them to be in a 2x2. How can I realize that it puts two frames next to each other, instead of moving them around so they fit.

I tried different options already, but non of them seem to work.

Any help would be appreciated

CodePudding user response：

You can put the iframes in a 2x2 grid.

However, importantly you need to make sure that the aspect ratio remains the same as the original.

This snippet ensures this by using the CSS property aspect-ratio taking your original iframe dimensions to set this.

.container {
  width: 50vw;
  /* set just for this demo make it what you want */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2vw;
}

iframe {
  aspect-ratio: 1920 / 1080;
  width: 100%;
}

<div >

  <iframe src="display1"></iframe>
  <iframe src="display2"></iframe>
  <iframe src="display3"></iframe>
  <iframe src="display4"></iframe>
</div>

CodePudding user response：

You can put your iframes in grid/flex to achieve the solution