我一直在尝试为内容块实现响应式16:9比例技巧,虽然在Chrome中得到了预期的结果,但其他浏览器(如FireFox和Edge)显示完全不同,并且没有按照预期的方式。
.streamContainer {
position: absolute;
width: 80%;
height: calc(100% - 120px);
display: flex;
bottom: 0px;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
transition: height 0.5s;
background: blue;
}
.streamRatio {
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
content: '';
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
background: red;
height: 0;
}
.streamInner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: green;
}
<div class="streamContainer">
<div class="streamRatio">
<div class="streamInner">
Content Goes Here
</div>
</div>
</div>
![Chrome](https://i.imgur.com/iiq6B0x.png)
![FireFox](https://i.imgur.com/QzRiUrE.png)