如何使用此比率自动调整2并排iframe的大小?

Question

我有这样的代码:链接中显示了两个并排的iframe的比例，我希望它在任何屏幕尺寸下都保持该比例。第一个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，我试图使用它，但iframes的大小不调整，而是成为一个小正方形，每当我试图使用从其他问题给出的方法有人能帮忙吗?

Answer 1

Try This

.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>

Answer 2

尝试在css中使用aspect-ratio属性…这样的:

iframe {aspect-ratio: 1/1;}

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