title: Vertically align different img sizes in different div sizes where the img is larger than the div
body: <p>I'm trying to align images inside divs vertically... not a problem.</p>
  
  <p>My problem arises with these conditions.</p>
  
  <ol>
  <li>The images will be undetermined &amp; different sizes.</li>
  <li>The images are larger than the divs and need to be masked by the divs.</li>
  <li>The site that uses this is built on the 320 &amp; up template, calling media queries to render the
  page for different screen sizes &amp; therefor the containing divs differ depending on screen size.</li>
  <li>When viewed on smart phone/tablet devices the containing div will change size when the device is turned (no page refresh) – the image needs to remain centered.</li>
  </ol>
  
  <p>I can't use <code>display:table-cell</code> because the images are larger than the div so with this option the hieght of the divs and <code>overflow:hidden</code> don't work.</p>
  
  <p>I tried jQuery vAlign which works great.. if you're not changing the screen size (such as turning a device). As it's is called on <code>(document).ready</code> the page needs refreshing to update the alignment of the images.</p>
  
  <p>Is there a way to trigger vAlign via media query?
  If not is there a hack/fix to the table-cell method which will allow the smaller <code>div</code> to mask the larger <code>img</code> with <code>overfolw:hidden</code> ?</p>
  
  <p>UPDATE:
  Been playing around with pure CSS (<a href="http://jsfiddle.net/jwoodcreative/TvH3t/" rel="nofollow">working example here</a>) but still can't get it to work :(</p>