Jump to content

CSS Fill Div?


Padgoi

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 months later...

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.