In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window.
What is aspect ratio?
The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 and 16:9.
To maintain the aspect ratio of the div add a percentage value for padding-top. Different aspect ratio have different percentage values. Some of them are shown below:
aspect ratio | padding-top value
--------------|----------------------
1:1 | 100%
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Syntax:
element {
padding-top: %value;
}
Example:
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<style>
.container {
background-color: green;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 25px;
color: white;
}
.example {
background: white;
color: green;
font-weight:bold;
font-size: 40px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<div class="example">
GeeksforGeeks
</div>
<p>A Computer Science portal for geeks. It
contains well written, well thought and well
explained computer science and programming
articles, quizzes etc. Also it contains several
coding questions to practice and develop your
skills in programming.
</p>
</div>
</div>
</body>
</html>
|
Output:
The output of above example is set to Aspect Ratio of 16:9. Resize the window to see the effect. Also change the corresponding values of the aspect ratio to see the desired changes in the browser window.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!