How to implement constant width to height ratio with CSS and HTML
Updated
•1 min readF
I am an Infrastructure and DevOps Engineer specializing in designing, building, and operating scalable, secure, and highly available cloud infrastructure. My core focus is on Microsoft Azure cloud platforms, Infrastructure as Code (IaC), and DevOps automation to support reliable production systems.
I work across cloud infrastructure engineering, DevOps practices, and site reliability engineering (SRE) principles to ensure systems are resilient, observable, and optimized for performance, cost, and scalability.
My experience includes designing and managing cloud environments across compute, networking, storage, identity, and security layers. I build Infrastructure as Code solutions using Terraform and Azure Resource Manager (ARM) templates to automate provisioning, configuration, and deployment of cloud resources.
I am actively involved in improving system reliability through monitoring, logging, and incident response processes using tools such as Azure Monitor and cloud-native observability solutions. I also participate in on-call operations, production support, and incident management to ensure high availability of critical systems.
Security is a core part of my engineering approach. I work with identity and access management (IAM), Azure Active Directory, and cloud security best practices to ensure infrastructure remains compliant, secure, and audit-ready in line with industry standards such as ISO 9001 and ISO 27001.
I collaborate with cross-functional teams including software engineers, DevSecOps, and product teams to deliver infrastructure solutions for customer-facing applications and enterprise platforms.
My technical interests and growth areas include:
Cloud Infrastructure Engineering (Azure, AWS, GCP)
Site Reliability Engineering (SRE)
Platform Engineering
Kubernetes & Container Orchestration
Infrastructure as Code (Terraform, ARM)
CI/CD Pipeline Automation
Distributed Systems & System Design
Cloud Security & Identity Management
I am passionate about building systems that are not only scalable and efficient but also reliable and easy for engineers to use. I am continuously growing my expertise toward senior-level Infrastructure, SRE, and Platform Engineering roles, including global remote opportunities.
Brief explanation and code sample:
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
padding-top on the ::before pseudo-element causes the height of the element to equal a percentage of its width. 100% therefore means the element's height will always be 100% of the width, creating a responsive square.
This method also allows content to be placed inside the element normally.
HTML
<div class="constant-width-to-height-ratio"></div>
CSS
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
Happy Coding!