Nolan's Blog

a PHP JS UI APP developer

Html5

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> 
</div>

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


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

But IE7 and below not work again..

继续阅读》

, ,

Powered by WordPress.org.