Create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resized:
How To – Height Equal to Width
Step 1) Add HTML:
Use a container element, like <div>, and if you want text inside of it, add a child element:
Example
<div class="container">
<div class="text">Some text</div> <!-- If you want text inside the container -->
</div>
Step 2) Add CSS:
Add a percentage value for padding-top to maintain the aspect ratio of the DIV. The following example will create an aspect ratio of 1:1 (the height and width is always equal):
Example 1:1 Aspect Ratio
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<h2>Maintain Aspect Ratio 1:1</h2>
<p>Resize the window to see the effect.</p>
<div class="container">
<div class="text">1:1 Aspect ratio</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
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: 20px;
color: white;
}
</style>
</head>
<body>
<h2>Maintain Aspect Ratio 16:9</h2>
<p>Resize the window to see the effect.</p>
<div class="container">
<div class="text">16:9 Aspect ratio</div>
</div>
</body>
</html>https://www.w3schools.com/howto/howto_css_aspect_ratio.asp