javascript - How to make point where divs stop shrinking with browser size - Stack Overflow

admin管理员组

文章数量:1199963

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

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: /

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

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

• javascript
• jquery
• html
• css
• resize

Share Improve this question Follow asked May 21, 2013 at 0:11 Bradley MitchellBradley Mitchell 28722 gold badges55 silver badges1414 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

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/

  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.

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.

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

本文标签： javascriptHow to make point where divs stop shrinking with browser sizeStack Overflow