title: Keeping Relative Width/Height Elements
body: <p>I am I using percentages based grid system to build a page for my personal website which uses a relative positioned banner and an absolute positioned div that falls in the center horizontally and at the bottom of the banner vertically. However, because said div is a screenshot of a webpage it is important to keep its height and its width relative to one another so that the image doesn't distort.</p>
  
  <p>Below is a little code and a jsfiddle -</p>
  
  <pre><code>&lt;div id="aps-group-banner"&gt;
      &lt;div id="aps-group-banner-wrap"&gt;
          &lt;div class="screenshot-banner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  #banner {
      height:100%;  
      background:red;
  }
  #banner-wrap {
      position:relative;
      width:67%; height:100%; 
  }
  .screenshot {
      position:absolute;
      background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
      background-size:100% 100%;
      width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sHanf/" rel="nofollow">http://jsfiddle.net/sHanf/</a></p>
  
  <p>Hope you guys can help! Thanks in advance</p>
  
  <p>Liam</p>