There are numerous dynamically designed websites where divs or images shrink as the browser size decreases.
A great example of this is http://en.wikipedia.org/wiki/Main_Page
The div containing the text shrinks proportionally to the browser size until it reaches a certain point, at which it stops shrinking and begins to cover the text boxes.
I am interested in implementing this effect in a JSFiddle project I am currently working on: http://jsfiddle.net/MrLister/JwGuR/10/
If you expand the size of the fiddle, you will observe how the images adapt dynamically. My objective is to make them stop shrinking at a specific point and instead start covering or collapsing on the pictures. This is necessary because when they become too small, the text on each image starts overlapping, creating an undesirable appearance.
Below is the CSS code 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%;
}