Pure CSS Dynamic Width & Height

index.html

<section class="dynamic1">
  <article class="content">
    Aspect Ratio<br/><span>1:1</span>
  </article>
</section>

<section class="dynamic2">
  <article class="content">
    Aspect Ratio<br/><span>2:1</span>
  </article>
</section>

<section class="dynamic3">
  <article class="content">
    Aspect Ratio<br/><span>1:2</span>
  </article>
</section>

<section class="dynamic4">
  <article class="content">
    Aspect Ratio<br/><span>4:3</span>
  </article>
</section>

<section class="dynamic5">
  <article class="content">
    Aspect Ratio<br/><span>16:9</span>
  </article>
</section>

<section class="dynamic6">
  <article class="content">
    Aspect Ratio<br/><span>2.39:1</span>
  </article>
</section>

Pure-CSS-Dynamic-Width-&-Height.markdown

Pure CSS Dynamic Width & Height

SASS @mixin for element blocks with dynamic width and heights.

@mixin based off article found here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

A Pen by Jeremy Paris on CodePen.

License.

script.js

/*
Mixin based off article found here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
*/

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Orbitron:700,500);

/*
MIXIN: dynamic-block
$content -> element selector with boxes content
$w -> box's width in percentage (defaults to 100%)
$h -> box's height as a percentage of $w (defaults to 100%)
*/
@mixin dynamic-block($content, $w: 100%, $h: 100%){
	position: relative;
	width: $w;
	&:before {
		content: "";
		display: block;
		padding-top: $h;
	}
	#{$content} {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	}
}

body {
  background: #666;
  font-family: Orbitron, sans-serif;
  font-weight: 500;
}

section {
  background: #bedead;
  text-align: center;
  float: left; 
  margin: 1.5em;
  overflow: hidden;
  
  .content {
    padding: 1em;
    span {
      font-weight: bold;
      font-size: 1.5em;
    }
  }
}

.dynamic1 {
  @include dynamic-block("article", 25%);
}

.dynamic2 {
  @include dynamic-block(".content", 25%, 50%);
}

.dynamic3 {
  @include dynamic-block("article", 25%, 200%);
}

.dynamic4 {
  @include dynamic-block(".content", 40%, 75%);
}

.dynamic5 {
  @include dynamic-block("article", 40%, 56.25%);
}

.dynamic6 {
  @include dynamic-block(".content", 80%, 41.84%);
}