Home > Developer > Web Develop
Requirement: The width of a div on the page changes as the screen width changes, but its aspect ratio is always 2:1, that is, when the width is 1000px, the height is 500px
Analysis: Regardless of how the browser window changes, always want to keep the aspect ratio of the target element to maintain 2:1, we first thought may be the use of JS to achieve, but the use of JS to achieve is often more cost-efficient, then today we would like to use CSS to complete this requirement.
Implementation: As a "code farmers" we still directly on the code to intuitive point!
Html:
<body>
<div class= "Container" >
<div class= "bracket" ></div>
<div class= "Target" ></div>
</div>
</body>
Here the. Target is the target element (let it be 2:1), the. Container is the container, and the bracket is the "stand" ( the key to achieving the requirement )
Css:
<style type= "Text/css" >
. container{
width:40%;
position:relative;
/ * Departure BFC, otherwise the internal elements will not open container*/
Overflow:hidden;
/ * In order to let everyone see the effect plus the side * *
border:1px solid black;
}
/ * Bracket to open the parent element at 2:1 Aspect ratio, if 4:3, then change it to 75% * /
. bracket{
margin-top:50%;
}
. target{
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Background-color:pink;
}
</style>
The. Container is our container because the width is a percentage, so its width changes as the browser window changes, and so is the corresponding. Target.
And here's the. Bracket set the margin-top:50%; Then the actual value of its margin-top is half the width of the parent element (. Container), it is important to note that it is the width of the parent element, so the height of the open is half the width, and the requirement of the aspect ratio of 2:1 is basically completed.
Finally, we fill the. Target with the entire container, which is position:absolute, and then the top, bottom, left, and right are all 0.
Here I'll post the full code:
<!doctype html>
<meta charset= "UTF-8"/>
<title>demo</title>
<style type= "Text/css";
. container{
width:40%;
position:relative;
/* Departure BFC, otherwise the inner element will not open container*/
overflow:hidden;
/* In order for everyone to see the edge of the effect plus */
border:1px solid black;
}
/* bracket to open the parent element at the aspect ratio of 2:1, and if 4:3, change this to 75% */
. bracket{
margin-top:50%;
}
. target{
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
<body>
<div class= "Container" >
<div class= "bracket" ></div>
<div class= "Target" ></div>
</div>
</body>
Note: This method is not I want to come out, but online search to find, just my project to use and feel very good on their own, thank you online Daniel!!!
Use CSS to let dynamic containers display at a fixed aspect ratio
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
