Conservons les proportions

l'astuce

J'ai trouvé une solution qui a déjà été publiée il y a quatre ans sur A List Apart et sur Stack Overflow. C'est tellement brillant que je veux partager la beauté de cette solution avec vous

HTML

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

 

CSS

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

 

Et pour le contenu

.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

 

D'autres ratio:

.ratio2_1:before{
	padding-top: 50%;
}
.ratio1_2:before{
	padding-top: 200%;
}
.ratio4_3:before{
	padding-top: 75%;
}
.ratio16_9:before{
	padding-top: 56.25%;
}

 

source: http://www.mademyday.de/css-height-equals-width-with-pure-css.htm

css