如何使用此比例自动调整 2 个并排 iframe 的大小？

Question

我有这个代码：有两个并排的 iframe，比例显示在 link 中，我希望它在任何屏幕尺寸下都保持该比例。第一个 iframe 是 iframe2，第二个 iframe 是 iframe 1.

<div class="box">
<iframe allow="camera; microphone; fullscreen; display-capture; autoplay" src="source 1" 
style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" 
marginheight="0px" marginwidth="0px" height="600px" width="300px" align="right" 
allowfullscreen> </iframe>
</div>

<div class="box">
<iframe src="source 2" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" 
frameborder="1" marginheight="0px" marginwidth="350px" height="600px" width="1033px" 
allowfullscreen></iframe>
</div>


[The ratio should also look like this no matter what the screen size is 1]
[1]: https://i.stack.imgur.com/H7D81.png

如何使用此比例自动调整 2 个并排 iframe 的大小？我对 CSS 了解一点，我尝试使用它但是 iframe 大小不调整而是变成一个小方块，每当我尝试使用其他问题给出的方法时有人可以帮忙吗？

Answer 1

尝试在 css 中使用宽高比属性...像这样：

   iframe {aspect-ratio: 1/1;}

还有一件事。最好在单独的 css 文件中进行样式设置，而不是内联样式设置

Answer 2

试试这个

.box {
    position: relative;
    float: left;
    padding-bottom: 38%;
    border: 5px solid #fff;
    box-sizing: border-box;
    width: 70%;
}
.box.box2 {
    width: 30%;
}
.box iframe {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

<div class="box">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div class="box box2">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

如何使用此比例自动调整 2 个并排 iframe 的大小？

How to automatically adjust size of 2 side-by-side iframe using a this ratio?

html

css

iframe