CSS fixed Width-to-height ratio container

Disclaimer: This article refers to a teacher's article on How to do container scaling in CSS

Core idea:

Set a container for the target element, set the height to 0, and use a vertical padding (percentage) to open the height, because padding sets the percentage based on the Width property of the container, and we then set the target element to absolute positioning and 100% width height.

Implement a 16:9 video

The demo code is as follows:

<div class= "wrap" ><div class= "left" ><div class= "inner" ></div> </div><div class= "right" ><div class= "top" ></div><div class = "Bottom" >    </div></div></div>

. Wrap{overflow:hidden;background-color: #efefef;}. Left,. right{float:left;width:50%;}. Left > inner{position:relative;padding-top:100%;}. Left Img{position:absolute;height:100%;width:100%;left:0;top:0;vertical-align:middle;}. Right > top{position:relative;padding-top:67%;}. Right > bottom{position:relative;padding-top:33%;}. Right img{position:absolute;width:100%;height:100%;left:0;top:0;
Vertical-align:middle;
}

CSS fixed Width-to-height ratio container