When it comes to setting the height in CSS, there is no direct equivalent of using padding-bottom for width.
One workaround I have used involves placing an img element with a data URL SVG (or a Base64 PNG) to avoid additional server requests and ensure a square size.
By setting the height of the image to 100%, it will maintain a square shape within its parent container, which has an inline block display. Using visibility: hidden can hide the image.
Check out the code snippet below:
.container {
background-color: green;
height: 50vh;
}
.fixed-aspect-ratio {
display: inline-block;
background-color: red;
height: 100%;
position: relative;
}
.fixed-aspect-ratio img {
display: block;
height: 100%;
visibility: hidden;
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="container">
<div class="fixed-aspect-ratio">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10'/></svg>">
<div class="text">Some text</div>
<!-- If you want text inside the container -->
</div>
</div>