12 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

I have a question about the below style applied to an image

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

is the min and max-width not enough to make the image responsive ?? why the 80% ? to control what ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

An image has an intrinsic size

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi gautamz07, In that case

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Hah!

Beat you by 2 min, Tony. Laughing out loud

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Ha it took me longer then

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Harumph

And I typed more and even did the math.

Laughing out loud g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks guys ... but a supplementary question .

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 ?????

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

That's just Gary's math, his

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 23 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

When

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."

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Nice I stand corrected and am

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

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks Gary

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Ancient Asian counting

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

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Funny lool

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