Nolan's Blog

a PHP JS UI APP developer


Height equals width with pure css

I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements. But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well.

<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 

Css Link this:
We use :before to set the height

	position: relative;
	width: 50%;		/* desired width */
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

But IE7 and below not work again..


, ,

Powered by