Responsive Boxes: Keep Ratio of Width and Height

eo-keepratio.coffee

# By Elad Ossadon

app = angular.module 'eo-keepratio'

SPACERS =
  '1:1':   "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  '16:10': "R0lGODlhEAAKAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAoAAAILhI+py+0Po5y0rgIAOw=="
  '16:9':  "R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7"
  '4:3':   "R0lGODlhBAADAIAAAP///wAAACH5BAEAAAAALAAAAAAEAAMAAAIDhI9WADs="
  '3:1':   "R0lGODlhAwABAIAAAP///wAAACH5BAEAAAAALAAAAAADAAEAAAIChAsAOw=="

app.directive 'keepRatio', ($compile) ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    size = SPACERS[attrs['keepRatio'] || '1:1']
    spacer = """
      <img src="data:image/gif;base64,#{size}" class="keep-ratio"> 
    """

    element.addClass('keep-ratio-container').prepend(spacer)

# <div keep-ratio="16:10">
#   <img src=...>
# </div>

eo-keepratio.scss

// By Elad Ossadon

.keep-ratio-container {
	display: block;
	position: relative;
	overflow: hidden;
	.keep-ratio {
		width: 100%; height: auto;
		position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: 0;
	}
	> * {
		position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
	}
}