如何指出div停止缩小浏览器大小

Question

有很多动态设计的网站,当浏览器大小减少时,div或图像会缩小.

这方面的一个例子是http://en.wikipedia.org/wiki/Main_Page

随着浏览器大小减小,文本缩小的div.这种情况一直持续到某一点,它只是决定停止收缩,并开始覆盖文本框.

我想用我正在研究的JSFiddle来做这个效果:http: //jsfiddle.net/MrLister/JwGuR/10/

如果你拉伸小提琴的大小,你会看到图片动态适应.目标是让它在某个时刻停止缩小,然后开始覆盖或放弃这些照片.我想这样做是因为它最终会变得很小,以至于每个图像上的文本重叠并且看起来很糟糕.

这是小提琴的CSS:

.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

只需min-width为要停止收缩的东西添加尺寸:)

像这样:

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

这是一个更新的小提琴:http://jsfiddle.net/jakelauer/JwGuR/13/