Html 同时保持纵横比和居中
我有一个位置=固定的容器(主容器) 这个容器里还有其他容器Html 同时保持纵横比和居中,html,css,iframe,Html,Css,Iframe,我有一个位置=固定的容器(主容器) 这个容器里还有其他容器 <div class="main-container"> <div class="container0"> <div class="container"> <div class="wrapper"> <iframe name="case-overlay-iframe" class="preview-iframe voice"
<div class="main-container">
<div class="container0">
<div class="container">
<div class="wrapper">
<iframe name="case-overlay-iframe" class="preview-iframe voice" allowfullscreen="true" src="https://cc-api-cp.adobe.io/api/v2/voice/assets/4ICee/video/embed?api_key=LucaApp1"></iframe>
</div>
</div>
</div>
</div>
有人能帮忙吗
.main-container {
position: fixed;
width: 100%;
height: 100%;
z-index: 1005;
top: 0px;
left: 0px;
overflow: auto;
}
.container0 {
position: absolute;
min-width: 700px;
min-height: 400px;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 200;
background: #262626;
}
.container {
background: #1c1c1c;
width: calc(100% - 440px);
height: 100%;
display: flex;
max-width: 1280px;
max-height: 720px;
}
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
margin: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}