min-width , max-width

Without an explicit variable size, the image will always stay the same width without regard to its container's size. Unless its native size falls outside the min/max parameters, it will not change.

As is, the image will be 80% of the parents width, and grow until the parent exceeds 1250px width. Or, it will shrink with the parent until the parent width drops below 325px.

cheers,

gary

Hi gautamz07,
In that case the 80% is based on the container.
If you have no width specified it would take the natural image dimensions as long as the width fits between 260px and 1000px

Beat you by 2 min, Tony.

Ha it took me longer then that to type it. (

And I typed more and even did the math.

g

lol stop fighting guys lol .

@gary i still have a question , i tried a simple. example

Example

now in this example i have given the image the following properties .

img{
 
    display: block;
    margin: 0 auto;
    min-width: 200px;
    max-width: 800px;
    width: 80%;
  }

now please notice carefully how width:80% is placed after max and min width .

but if u have a look at the example the image clearly take max-width: 500px as the size and when the browser viewpoint changes to something lesser or starts shrinking , it moves to min-width:200px;

after trying this out i kind of get it , that explicitly setting the min-width and max-width , will take precedence over just , width .

BUT GARY U have me confused :

you said :

As is, the image will be 80% of the parents width, and grow until the parent exceeds 1250px width. Or, it will shrink with the parent until the parent width drops below 325px.

now in my initial example i had given image the following definition (properties)

width: 80%;
max-width: 1000px;
min-width: 260px;

where did 1250px and 325px come from ?????

That's just Gary's math, his abacus is rusty.
I think he must of been thinking of another issue and mixed the values.

the container is 1250px wide, the image will be 80%, or 1000px. When the container gets wider, the image doesn't. Likewise as the container shrinks so does the image until the container is 325px and the image is 80%, or 260px. As the container gets even smaller, the image doesn't.

cheers,

gary

//edit: My abacus is rust-free. It's an HP50g that I can't do more than +-*/, but I look at ~50 multifunction keys and go, "Ooh, shiny."

Nice I stand corrected and am searching the web for a new abacus.

Thanks gary , thats all i needed . whts abacus btw ??

Ancient Asian counting machine. http://en.wikipedia.org/wiki/Abacus

if tats useful in web development , i'll get myself one