To ensure your content is proportionate, you can utilize styles like the ones demonstrated below. Utilizing the padding-top property as a percentage allows for creating spacing between elements such as headers and images.
Below is an example that showcases how to properly apply these styles to your content. Establishing outer and inner containers makes it easier to organize components like headers and images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
height:100%;/* 1:1 Aspect Ratio */
}
.container .outer {
width: 100%;
padding-top: 5%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
text-align:center;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
display: block;
width: 50%;
height: 50%;
padding: 0% 25%;
}
h1 {
margin:auto;
color: rgb(60, 255, 0);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
</div>
</body>
</html>
You can refer to this guide for more insights https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements#:~:text=For%20proportional%20resizing%20purposes%2C%20it,the%20aspect%20ratio%20you%20need.&text=And%20that's%20it!
This should provide the guidance you need to achieve your desired layout effectively.