7

有很多动态设计的网站，其中 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%;
}
4

3 回答 3

13

只需min-width为您想要停止收缩的东西添加一个大小:)

像这样：

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

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

于 2013-05-21T00:14:32.713 回答
3 
  min-width:500px;

将导致窗口的最小宽度为 500 像素。 http://jsfiddle.net/JwGuR/14/达到 500 像素后，图像停止调整大小。

于 2013-05-21T00:15:18.713 回答
1

这是媒体查询的示例。您可以使用 css 为某些情况定义最小和最大宽度。在您的情况下，只需给出一个最大宽度的情况并在那里设置 css 属性。

http://css-tricks.com/css-media-queries/

img{
    width:100%;
}

@media all and (max-width: 699px) {
  img{
    width:500px;
  }
}

这是一个基本的例子。正如 Jake 所说，您也可以只给它一个最小宽度，但在许多情况下，页面的布局应该针对移动设备或平板电脑视图进行更改，其中仅定义一个最小宽度是不够的

于 2013-05-21T00:14:20.697 回答