title: How to make point where divs stop shrinking with browser size
body: <p>There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.</p>
  
  <p>An example of this would be <a href="http://en.wikipedia.org/wiki/Main_Page" rel="noreferrer">http://en.wikipedia.org/wiki/Main_Page</a></p>
  
  <p>The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.</p>
  
  <p>I would like to do this effect with a JSFiddle I am working on:
  <a href="http://jsfiddle.net/MrLister/JwGuR/10/" rel="noreferrer">http://jsfiddle.net/MrLister/JwGuR/10/</a></p>
  
  <p>If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
  The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.</p>
  
  <p>Here is the CSS for the Fiddle:</p>
  
  <pre><code>.figure {
      position: relative;
      display:inline-block;
      max-width: 33%;
  }
  
  .figure .figcaption {
      text-align: center;
      height:0;
      top: 40%;
      width: 100%;
      font-size: 55px;
      color: white;
      position: absolute;
      z-index: 1;
  }
  
  .figure img {
      display: block;
      max-width: 100%;
  }
  </code></pre>