Image Ratio Calculator

August 9, 2020
Updated July 22, 2022

This is a CSS snippet to aid in creating images that maintain a certain ratio across all screen sizes. The ‘padding-top’ value is the only thing that will change.

For example, a perfect square will always have a padding-top of 100%;

.custom-ratio:before {
	content: "";
	padding-top: 100%;
	float: left;
}
.custom-ratio:after {
	content: "";
	display: table;
	clear: both;
}
.custom-ratio {
	&:before {
		content: "";
		padding-top: 100%;
		float: left;
	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}
	// add any additional ratios like so:
	&.wide {
		&:before {
			padding-top: 56.25%;
		}
	}
}

Live Preview

Your padding top should be: {{calcedPercentage}}%