A Pen by Austin Pray.

index.html

<section class="row" data-uheight data-uheight-breakpoint="768px">
  <div class="column--right" data-uheight-target>
    <img src="http://i.imgur.com/BAg6YPp.jpg">
  </div>
  <div class="column--left">
    <div class="column__text">
      <h1>JS Based</h1>
      <blockquote>
      The creative challenge and high production standards required to realize Sappi The Standard 5: Special Effects demanded a level of quality that few printers could match. Classic came through with style and aplomb. My compliments to everyone involved.”
-KIT HINRICHS
      </blockquote>
    </div>
  </div>
  
</section>

<section class="row" data-uheight data-uheight-breakpoint="768px">
  <div class="column--left" data-uheight-target>
    <img src="http://i.imgur.com/Aq28t6m.jpg">
  </div>
  <div class="column--right" >
    <div class="column__text">
      <h1>Check My Scripts</h1>
      <blockquote>The creative challenge and high production standards required to realize Sappi The Standard 5: Special Effects demanded a level of quality that few printers could match. Classic came through with style and aplomb. My compliments to everyone involved.”
        -KIT HINRICHS</blockquote>
    </div>
  </div>
</section>

script.js

//compare to http://pastebin.com/BsmEYsTr and prepare to lol

//mit license http://opensource.org/licenses/MIT
;(function ( $, window, document, undefined ) {
  $.fn.uHeight = function( options ) {  
    var settings = {
      'target' : 'uheight-target',
      'breakpoint' : 'uheight-breakpoint'
    };
    if ( options ) { 
      $.extend( settings, options );
    }
    return this.each(function() { 
      var $this = $(this);
      if($(window).width() >= settings.breakpoint) {
        $this.height($this.children('[data-' + settings.target + ']').height());
      } else {
        $this.css("height", "auto");
      }
    });
  };
})( jQuery, window, document );

function theLayout() {
  $('[data-uheight]').uHeight();
}
var lazyLayout = _.debounce(theLayout, 300);
$(window).resize(lazyLayout);
$(function(){
  theLayout();
});

style.scss

@import "compass";
$small-screen: 768px;
$small: "only screen and (min-width: #{$small-screen})";

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
*,
*:before,
*:after {
  box-sizing:border-box;
}
.row {
  @extend .cf;
  background: #BADA55;
  position:relative;
}
.column {
  @media #{$small} {
    float:left;
    width:50%;
  }
}
.column--left {
  @extend .column;
}
.column--right {
  @extend .column;
  @media #{$small} {
    float:right;
    .column__text {
      right:2.5%;
      left:auto;
    }
  }
}
.column__text {
  color:#fff;
  @media #{$small} {
    display:table;
    height:auto;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:2.5%;
    width:45%;
  }
}

img {
  display:block;
  width:100%;
}
h1,blockquote {
  margin:0;
  padding:0;
  line-height:1.45;
}

Vertical-Centering-jQuery-Plugin.markdown

Vertical Centering jQuery Plugin

A Pen by Austin Pray on CodePen.

License.