andy-h
1/6/2016 - 9:24 PM

Ratio-maintaining boxes. Got this from http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Ratio-maintaining boxes. Got this from http://www.mademyday.de/css-height-equals-width-with-pure-css.html

ratio-box.css
content_copyfile_download
/* <div class="ratio-box"><div class="ratio-content">content</div></div> */

.ratio-box {
	position:relative;
	width:100%; /*set the width here*/
}
.ratio-box::before {
	content:"";
	display:block;
	padding-top:75%;	/*4:3 ratio*/
	padding-top:56.25%;	/*16:9 ratio*/
	/*(padding percentages refer to the width of the containing block)*/
}
.ratio-content {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
}