Padgoi Posted July 11, 2007 Share Posted July 11, 2007 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? Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 11, 2007 Share Posted July 11, 2007 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 Quote Link to comment Share on other sites More sharing options...
Azu Posted July 11, 2007 Share Posted July 11, 2007 overflow:hidden Done Quote Link to comment Share on other sites More sharing options...
Padgoi Posted July 12, 2007 Author Share Posted July 12, 2007 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... Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted July 12, 2007 Share Posted July 12, 2007 Why don't you just use a script to re-size the image to a maximum of 300x300? that would solve your problem Quote Link to comment Share on other sites More sharing options...
Azu Posted September 12, 2007 Share Posted September 12, 2007 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. Quote Link to comment Share on other sites More sharing options...
liebs19 Posted September 12, 2007 Share Posted September 12, 2007 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. Quote Link to comment Share on other sites More sharing options...
FridayRain Posted September 13, 2007 Share Posted September 13, 2007 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" /> Quote Link to comment 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.