#1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492

    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.
    Attached Images
    "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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    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;
    }
  4. #3
  5. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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!
    "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
  6. #4
  7. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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!
    "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
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Not something I have done before, but what about adding in width: auto; to the css?
  10. #6
  11. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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!
    "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
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    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
  14. #8
  15. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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

IMN logo majestic logo threadwatch logo seochat tools logo