s_ff_da_b_ff Posted July 17, 2008 Share Posted July 17, 2008 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 Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/ Share on other sites More sharing options...
s_ff_da_b_ff Posted July 17, 2008 Author Share Posted July 17, 2008 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? Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-592581 Share on other sites More sharing options...
haku Posted July 17, 2008 Share Posted July 17, 2008 This should be: img { height: 200px; width: 200px; } Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-592918 Share on other sites More sharing options...
TheFilmGod Posted July 17, 2008 Share Posted July 17, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-592928 Share on other sites More sharing options...
s_ff_da_b_ff Posted July 18, 2008 Author Share Posted July 18, 2008 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! Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-592985 Share on other sites More sharing options...
KevinM1 Posted July 18, 2008 Share Posted July 18, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-593361 Share on other sites More sharing options...
s_ff_da_b_ff Posted July 18, 2008 Author Share Posted July 18, 2008 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? Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-593623 Share on other sites More sharing options...
s_ff_da_b_ff Posted July 18, 2008 Author Share Posted July 18, 2008 Oh and none of my java script is working in IE 6 but works in mozilla and Safari Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-593626 Share on other sites More sharing options...
KevinM1 Posted July 18, 2008 Share Posted July 18, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-593690 Share on other sites More sharing options...
TheFilmGod Posted July 18, 2008 Share Posted July 18, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-593864 Share on other sites More sharing options...
s_ff_da_b_ff Posted July 21, 2008 Author Share Posted July 21, 2008 Hmm so you think its not even worth editing my site for IE? Everything is perfect in FF and Opera. Quote Link to comment https://forums.phpfreaks.com/topic/115256-containing-a-image-within-a-div/#findComment-595455 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.