CSS max-width not giving proportional resizing?

It's really easy, just add a width to the parent.

Up vote 0 down vote favorite share g+ share fb share tw.

I have a narrow view that I am inserting some HTML into. Every once in awhile there is an image that is too wide, so I have been wrapping the original HTML string, using this CSS to keep it under control: . .

...original HTML inside the div wrapper... . But it doesn't scale the width and height of the images proportionally, so the result is a very distorted image. Is there something else I can do, preferably with CSS or something equally as easy?

This is embedded inside a webview in an iOS application. I don't want write code to parse through the original HTML and look for images. I need a simple solution that takes advantage of the methods that are supported by the native UIView class.

UPDATE: Using the example in the answer below from Kyle, I think the problem is occurring with images that have embedded width and height attributes: Kyle's example: Modified, with width and height added to the first image link Both using this CSS: div {width:100px;} p{max-width:100%;} img{max-width:100%;} It really isn't making any difference whether the container width attribute is set or not. I tried it both ways. As a matter of fact, in this case (link) it looks like the image is first scaled up by the width and height attributes, followed by the width being scaled down by the CSS max-width.

This leads a a very bizarre effect. Css resizing max-width link|improve this question edited Oct 16 '11 at 17:35 asked Oct 16 '11 at 7:11Jim2,1172520 77% accept rate.

It's really easy, just add a width to the parent. Div { width: 100px; } Demo here.

Thanks, Kyle. That looked promising, but after I experimented with it, I see it isn't working. I added more details to my questions about what I discovered.

– Jim Oct 16 '11 at 16:28.

I am not sure if I understood right your question, but here is an idea: jsfiddle.net/FyC6r/4/ . Mydiv { width:200px; height:150px; border: 1px solid red; } . Mydiv img { width:100%; } this way you'll have a image resized proportionally dependson what you need first, the width or height.. leaving only width 100% in css it means that image will be resized to fit the div by width and height will be resized the same times as the width so the scale will be respected.

Well..if want them resized by width and height then you'll have a image distortion due to different scale. You can paly with width and height of img style to change them and fit one image, but when another one is added with different sizes you'l get again a wrong displayed image. I would go for width to keep it resized, cause in the height, there is always space under the screen :).

Here is another one jsfiddle.net/FyC6r/5 – rmagnum2002 Oct 16 '11 at 16:49.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.