preventing IMG to strech div

[kakaini]

HI!Lets say i have div, which width is 100% or in pixels, in my resolution case, it would be around 500, but that images width is biger that 500px. i tried to set the <img style="max-width:100%;" - it stays the same, gues it took 100% from the img size not div. also if i used % not px, i could decreese img, but div's strech remained.the div has overflow:auto; , but dont think that affects anything.Any suggestions?

[thescientist]

huh?I'm confused about the relationship between your div and img. Do you have a code sample?Basically, if the div is set to 100% and that comes out to 500px in your resolution, but the image is more that 500px wide, then the image will expand the div past 500px (outside the div). if you set an image to width 100%, then it will be exactly as wide as it has been made to be.

[kakaini]

huh?I'm confused about the relationship between your div and img. Do you have a code sample?Basically, if the div is set to 100% and that comes out to 500px in your resolution, but the image is more that 500px wide, then the image will expand the div past 500px (outside the div). if you set an image to width 100%, then it will be exactly as wide as it has been made to be.

You understood it all right. I need the image to be as wide as the div, if the image isn't smaller, not messing my div size.

[dsonesuk]

got me confused as well, want image same width as div or not???? looked like at beginning he did, then at the end i thought maybe he doesn't.edit:just use<div style="width:500px;border:1px dashed red;"><img src="SmallToLargeImageGallery/klematis3_big.jpg" style="width:100%" /></div>border wil show current width.

[kakaini]

got me confused as well, want image same width as div or not???? looked like at beginning he did, then at the end i thought maybe he doesn't.edit:just use<div style="width:500px;border:1px dashed red;"><img src="SmallToLargeImageGallery/klematis3_big.jpg" style="width:100%" /></div>border wil show current width.

500px was just my case. i need it to be dynamic value - therefore is 100%.Not helpfull at all.

[dsonesuk]

just change it to 100%, it will still work.

[kakaini]

I experimented around a bit, i had your option earlyer, it didnt work, now i tryed with html tag "width='100%'" not css style. it worked out fine.EDIT: ahh... but now the images which are smaller ar increased aswell.Not sure whats happening - now it works with css aswell

[dsonesuk]

I knew it should work, i had been trying to recreate a instance that would cause this not to work, without success.which browser are you using? it helps to clear the cache before refreshing the page, also the only other thing i can think off is that some other styling was affecting the resizing.

[kakaini]

It's not browser issue. I used max-width at begining, and that used % from img size.So... from begining. I need the 1st img which is extreamly large to be in div size, but the 2nd img to be in original size. And all that with same class/style.

<style type="text/css">.img {	width:100%;}</style><br /><br /><div style="width:800px; background:#CCC;">	<div style='overflow:auto; width:95%; padding:7px;'>	<img class="img" src="http://esamultimedia.esa.int/images/launcher/V165_Hi-res.jpg" />	<img class="img" src="http://img377.imageshack.us/img377/1128/lineag11in0.jpg" />	</div></div>

Maybe someone can offer another way, not with css.

[Howdy_McGee]

at some point your webpage can't be fluid. It sounds like you need container Div's with a Pixel width so the image has some wiggle room but doesn't stretch past the container div's width.Using Precentages will keep stretching whatever element to what ever the user screen is. Using Pixels limits that, so if you put a container div around it and give it a width with pixels it should only stretch so far without going over.

[kakaini]

at some point your webpage can't be fluid. It sounds like you need container Div's with a Pixel width so the image has some wiggle room but doesn't stretch past the container div's width.Using Precentages will keep stretching whatever element to what ever the user screen is. Using Pixels limits that, so if you put a container div around it and give it a width with pixels it should only stretch so far without going over.

I need it to work in that conditions i speciffied. The Question is if there is a way to do this with css and how? Code that would keep the biga images in div borders w/o expanding it and images that are smaler originaly - dont expand.

[ShadowMage]

I don't think that what you're trying to do can be done purely with CSS. JavaScript can certainly handle it, but the downside there is that users can turn JavaScript off, which means that your images won't be resized when they are larger than your div. That may or may not be OK, I don't know, that's up to you.EDIT: Upon making a quick test it seems that max-width: 100% does actually work. Tested it in FF, IE, Chrome, Safari, and Opera.Here's my test code:

.imgContainer {	border: 1px solid black;	padding: 0px;	margin: 0px;	background-color: #CCCCCC;	height: 100px;	width: 100px;}.imgContainer img {	max-width: 100%;}...<div class='imgContainer'><img src='bigImage.jpg' alt='test1' /></div><div class='imgContainer'><img src='smallImage.jpg' alt='test2' /></div>

[kakaini]

EDIT: Upon making a quick test it seems that max-width: 100% does actually work. Tested it in FF, IE, Chrome, Safari, and Opera.Here's my test code:

.imgContainer {	border: 1px solid black;	padding: 0px;	margin: 0px;	background-color: #CCCCCC;	height: 100px;	width: 100px;}.imgContainer img {	max-width: 100%;}...<div class='imgContainer'><img src='bigImage.jpg' alt='test1' /></div><div class='imgContainer'><img src='smallImage.jpg' alt='test2' /></div>

Yup... it realy does, if it is not in table. I know that tables ar outdated, but i didnt think that they would make such problems and with them it's easyer to create design. Discovering this table and div/css uncompatibility gives me a lot of trouble.EDIT #236546~: I found a way to fix it. add table-layout property to table and its done.

<div style="width:70%;"><table cellspacing='0' style='width:100%; table-layout:fixed;'>		<td style="width:100%;"><div style="width:100%; background:#CCC;">	<div style='overflow:auto; padding:7px;'>	<img style="max-width:100%;" src="http://esamultimedia.esa.int/images/launcher/V165_Hi-res.jpg" />	<img style="max-width:100%;" src="http://img377.imageshack.us/img377/1128/lineag11in0.jpg" />	</div></div>		</td></table></div>

I hope i can fix this outdated HTML with CSS otherwise i have to redesign and the new count of div's is going to be confusing.