The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
Image max-height question
Discuss Image max-height question in the CSS Help forum on Dev Shed.
Image max-height question Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
November 20th, 2012, 10:42 AM
|
 |
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
|
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:
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.
__________________
The number for UK Emergencies is changing, the new number is 0118 999 881 999 119 7253
"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
|
November 20th, 2012, 11:08 AM
|
|
|
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;
}
|
November 20th, 2012, 11:10 AM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
|
Hi simplypixie
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!
|
November 20th, 2012, 11:41 AM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
Quote: | Originally Posted by simplypixie 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!
|
November 20th, 2012, 12:25 PM
|
|
|
|
Not something I have done before, but what about adding in width: auto; to the css?
|
November 20th, 2012, 01:49 PM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
Quote: | Originally Posted by simplypixie 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!
|
November 22nd, 2012, 09:22 AM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 2
Time spent in forums: 16 m 14 sec
Reputation Power: 0
|
|
Quote: | Originally Posted by badger_fruit 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! |
I max-widht:x and max-height:y and it fited itself and kept the ration to the original
|
November 22nd, 2012, 10:03 AM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
|
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!
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
