javascript 如何确定 div 停止随浏览器大小缩小的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16660171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make point where divs stop shrinking with browser size
提问by Bradley Mitchell
There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.
有很多动态设计的网站，那里的 div 或图像随着浏览器大小的减小而缩小。
An example of this would be http://en.wikipedia.org/wiki/Main_Page
这方面的一个例子是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.
随着浏览器尺寸的减小，文本所在的 div 会缩小。这一直发生到某个点，它只是决定停止缩小，并开始覆盖文本框。
I would like to do this effect with a JSFiddle I am working on: http://jsfiddle.net/MrLister/JwGuR/10/
我想用我正在处理的 JSFiddle 来做这个效果：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:
这是 Fiddle 的 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%;
}
回答by Jake
Simply add a min-widthsize to the things you want to stop shrinking :)
只需min-width为您想要停止缩小的东西添加一个尺寸:)
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/
这是一个更新的小提琴：http: //jsfiddle.net/jakelauer/JwGuR/13/
回答by ZZPLKF
min-width:500px;
would cause the window to have a minimum width of 500px. http://jsfiddle.net/JwGuR/14/after you reach 500px the images stop resizing.
会导致窗口的最小宽度为 500 像素。 http://jsfiddle.net/JwGuR/14/达到 500 像素后，图像停止调整大小。
回答by Kai Qing
Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.
这是媒体查询的示例。在某些情况下，您可以使用 css 定义最小和最大宽度。在您的情况下，只需给出一个最大宽度的情况并在那里设置 css 属性。
http://css-tricks.com/css-media-queries/
http://css-tricks.com/css-media-queries/
img{
width:100%;
}
@media all and (max-width: 699px) {
img{
width:500px;
}
}
This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice
这是一个基本的例子。正如Hyman所说，你也可以只给它一个最小宽度，但在许多情况下，页面布局应该针对移动设备或平板电脑视图而改变，其中简单地定义最小宽度是不够的
