containing a image within a div

[s_ff_da_b_ff]

ok yo I have a div

 

photo {

 

height: 200

width: 200

 

}

 

but my image is 250 by 250

 

what is the code so that the image has to stay contained within the div? THANKS

[s_ff_da_b_ff]

and just to clarify i dont have any text in the div. Alls I have is a div with an image and the image is much to large for the div.

 

Im hoping theres  a way to just set boudaries around the boarders of the div?

[haku]

This should be:

 

img {

height: 200px;
width: 200px;

}

[TheFilmGod]

I'm a bit confused. You have an image with the dimensions of 250 x 250 and want to fit it into a div that is 200 x 200? - How does that make any sense?  ???

 

If you want to hide any overflow use "overflow: hidden;"

 

If you want the browser to scale the image down to 200 x 200, then in your html markup:

 

<img src="..." width="200" height="200" />

 

img {

height: 200px;
width: 200px;

}

 

Although in theory, this is correct, I personally don't like it. It requires you to be very specific within your css, otherwise all images will become that width/height. Furthermore, stating the dimensions in the actual markup would improve backward compatibility with older browsers and improve Search engine optimization.

[s_ff_da_b_ff]

hmm. Thanks guys. Its funny, you are the only two who consistently give advice around here its like pulling teeth trying to get answers around here!

[KevinM1]

I'm a bit confused. You have an image with the dimensions of 250 x 250 and want to fit it into a div that is 200 x 200? - How does that make any sense?  ???

 

If you want to hide any overflow use "overflow: hidden;"

 

If you want the browser to scale the image down to 200 x 200, then in your html markup:

 

<img src="..." width="200" height="200" />

 

img {

height: 200px;
width: 200px;

}

 

Although in theory, this is correct, I personally don't like it. It requires you to be very specific within your css, otherwise all images will become that width/height. Furthermore, stating the dimensions in the actual markup would improve backward compatibility with older browsers and improve Search engine optimization.

 

It's not hard to be specific with CSS.  That's why it has class selectors.  And how does putting image dimension info in the markup itself help SEO?  Finally, if a browser doesn't understand basic CSS1 dimension properties, it's not worth developing for.  That sort of irrational fear of developing for those fringe users who still think it's 1999 is a pet peeve of mine - I cringe when I see people throw JavaScript in HTML comments, too.

 

In any event, using CSS to modify a lot of images' sizes strikes me as lazy/sloppy design.  Why?  Because you're not actually shrinking the image.  You're merely telling the browser to modify the way the image is displayed.  If you have a 500 x 500 image, and tell it to display as 250 x 250 (or smaller, for a thumbnail), all of the info of the 500 x 500 image is still transmitted.  A lot of wannabe web developers tend to go that route, preferring to force the browser to render the image differently in different situations, not realizing they're killing their own bandwidth in the process.

[s_ff_da_b_ff]

Point taken.

 

I decided to just use an online image resizer -- solved all my problems .

 

However, I just noticed that my website looks really good in fire fox but absolutely hideous in IE. For the love of god what did I do wrong?

[s_ff_da_b_ff]

Oh and none of my java script is working in IE 6 but works in mozilla and Safari

[KevinM1]

Point taken.

 

I decided to just use an online image resizer -- solved all my problems .

 

However, I just noticed that my website looks really good in fire fox but absolutely hideous in IE. For the love of god what did I do wrong?

 

It's probably not you but IE.  The general rule of thumb is to develop for Firefox or Opera (using the Gecko engine), then 'modify' (read: hack) it to also work in IE.

 

Regarding your JavaScript issues, feel free to create a new thread in the JavaScript section about them.

[TheFilmGod]

It's not hard to be specific with CSS.  That's why it has class selectors.

 

I didn't say it's hard, I said it simply requires you to be VERY specific.

 

And how does putting image dimension info in the markup itself help SEO?

 

It helps SEO because search engines don't read CSS and would not know how large the image is. A perfect example is google image search - this engine would take images more seriously (rank them higher) when they are enclosed within <img /> tags that contain the width/height dimension explicately.

 

Finally, if a browser doesn't understand basic CSS1 dimension properties, it's not worth developing for.  That sort of irrational fear of developing for those fringe users who still think it's 1999 is a pet peeve of mine - I cringe when I see people throw JavaScript in HTML comments, too.

 

When did I ever mention that? I wasn't referring to old browsers - I have stopped supporting IE6 already and only develop for the latest versions of Firefox and Opera.

 

Adding the width/height attributes within the markup improves ACCESSIBILITY for those that are blind and are handicapped, especially for those using screen readers. Those screen readers do not css. You probably are thinking, "But they can't see, so why does it matter?" - but the truth is, such little details like these help them understand the structure of the page better and help them differentiate between a small icon and a large "important" image.

[s_ff_da_b_ff]

Hmm so you think its not even worth editing my site for IE? Everything is perfect in FF and Opera.