Image max-height question

Good day everybody.

I have a layout which looks like the attached PNG file.

As you can see, I have four DIVs:

PIC

CAPTION

CONTAINER

BODY

I have a max-height set on DIV ID pic so that it will only ever reach 400px in height. This is working OK; caption div will always appear below it and container will re-size accordingly. All the time, the text in "body" will wrap around to display the article text.

My problem is that some authors include images within the body text and don't display a side "pic" or "caption".

My question is, is it possible - using CSS - to limit images that appear in my "body" DIV to a max-height of 400px?

Thank you for reading and I hope that someone can offer me some help here!
Regards.

"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984

Thank you for the reply; sorry that's my mistake, the DIV I have called 'body' in my post here is actually called article_body .. I guess after hours of staring at a screen it must have just blended away .. I will give the code a go and see what happens!!

Thank you!

"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984

Not sure if it is semantically correct but have you tried (assuming here that you actually have a div called body as not sure if you mean the main body property)

Code:

body img {
max-height: 400px;
}

OK, I have applied this but although the max-height seems to have worked, the image is now out of correct proportion

Is there a way to "crop" the image at 400px so as to keep the aspect ratio?

Thanks again!

"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984

Not something I have done before, but what about adding in width: auto; to the css?

ahh, width auto ... I tried width:100% and that made the image expand to the full width of the div (I expected it to stay 100% of the image size).

Well, I'll give that a go tomorrow and see what happens.
MANY thanks for your help so far, it's really really appreciated!

"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984

Unfortunately, width:auto; didn't work either.
As it is, I've given up with this because it's taking too long and it was more of a "nice to have" thing than something we desperately needed.

I really appreciate your time in trying though, thanks all the same!

"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984