How to make point where divs stop shrinking with browser size

Question

There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.

An example of this would be http://en.wikipedia.org/wiki/Main_Page

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.

I would like to do this effect with a JSFiddle I am working on: http://jsfiddle.net/MrLister/JwGuR/10/

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.

Here is the CSS for the Fiddle:

.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%;
}

Answer 1

Simply add a min-width size to the things you want to stop shrinking :)

Like so:

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
    min-width: 150px;
}

Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/