CSS Ratios

index.css

/* ELEMENT RATIOS
=============================================== */
/**
 * To force an element to keep a certain ratio.
 * Use as follows:
 *
 * <div class="ratio ratio-square">
 *   <div class="ratio-inner">
 *     <!-- contents, e.g. image -->
 *   </div>
 * </div>	
 *
 */
.ratio {
	height: 0;
	position: relative;
}

.ratio-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
}

.ratio-square {
	padding-bottom: 100%;
}

.ratio-golden {
    padding-bottom: 61.8%;
}



/** Stuff **/

.one {
    background: salmon;
}

.two {
    background: aquamarine;
}

.container {
    width: 25%;
}

index.html

<div class="container">
    <div class="ratio ratio-square one">
     <div class="ratio-inner">
         square
     </div>
    </div>	
    
    <div class="ratio ratio-golden wrap two">
     <div class="ratio-inner">
         golden
     </div>
    </div>	
</div>