Managing the (width : height) aspect ratio of empty, block level elements

Managing the (width : height) aspect ratio of empty, block level elements

2 min. read

HTML markup

<div id="_800">

	<div class="rt">2:1</div>
	<div id="a2_1"></div>

	<div class="rt">3:1</div>
	<div id="a3_1"></div>

	<div class="rt">4:1</div>
	<div id="a4_1"></div>

</div>

CSS rules

Applying some basic css

#a2_1,#a3_1,#a4_1
{
	margin:20px 0px;
	background-color:#673AB7;
}

.rt
{
	text-align:center;
	font-size:20px;
	font-weight:bold;
}

Main part of css

#_800
{
	max-width:800px;
	margin:0 auto;
}

#a2_1
{
	padding-top:50%;
}

#a3_1
{
	padding-top:33.333%;
}

#a4_1
{
	padding-top:25%;
}

See result in the fiddle below

Write comments