CSS Fill Div?

[Padgoi]

Hi, I have a div and I want to specify a maximum width for that so that if a user tries to enter say a picture inside that div and the picture is larger than the max width of that div, the div will auto resize it so it doesn't stretch the div and auto fits into the dimensions of the div.

 

In other words:

Div max width = 300px

User tries to put an image into the div that is larger than 300 px width.

I don't want the div to stretch, I want the image to auto fit into the div's 300 px width.

 

Any help with this?

[RichardRotterdam]

I don't think that is possible with CSS maybe in the future with CSS 3 but not right now. If you want to accomplish that I think you will need a php solution

[Azu]

overflow:hidden

 

Done

[Padgoi]

overflow: hidden just hides the stuff that doesn't fit in the div.  I want to show the stuff, just resize it automatically to fit into the width constraints of the div. 

 

And using css, I think you're right, I don't think it's possible, though it seems possible with tables.  Unfortunately I coded this thing using divs and it would take way too much time to figure out how to . . .

 

long story...

[cmgmyr]

Why don't you just use a script to re-size the image to a maximum of 300x300? that would solve your problem

[Azu]

overflow: hidden just hides the stuff that doesn't fit in the div.  I want to show the stuff, just resize it automatically to fit into the width constraints of the div. 

 

And using css, I think you're right, I don't think it's possible, though it seems possible with tables.  Unfortunately I coded this thing using divs and it would take way too much time to figure out how to . . .

 

long story...

I don't think you can resize the image client-side like that. Try resizing it server side with GD or something.

[liebs19]

If you wanted to make them always be 300px wide you could use

 

div img
{
width:300px;
height:300px;
}

 

I think that would make all images inside div tags be 300px wide and 300px high. It would make images smaller than 300px grow to that size and it would not work well for non-square images. I have not tried this but I think it should work.

[FridayRain]

How are you displaying the user-inserted image? If you have an IMG tag with a variable referring to the image's location, you can put dimension properties either as CSS applied to that specific IMG id/class, or put them directly in the IMG tag.

 

 

Something like this, although I don't remember if it'll shrink it proportionally or what:

<img class="userpic" src="userpics/variable.jpg" width="300px" height="300px" />