6

What I'm experiencing is that the image is going way overboard of the div it is sitting in although the CSS is saying it should sit in the max-height of 700.

Any help appreciated

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  max-height: 700px;
}

#largephotohold IMG {
  max-height: 100%;
  max-width: 100%;
}
<DIV id="largephotohold">
<img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

https://jsfiddle.net/e8nx0cto/

1
  • bro u need to remove max- only..... if you will give only height: 400px; that would work
    – Rush.2707
    Commented Jul 20, 2016 at 2:22

3 Answers 3

10

When you apply a percentage height on an element, you need to set a height on the parent. Setting a max-height or min-height doesn't work (as you can see). It must be the height property.

For an illustration, switch the max-height: 700px to height: 700px. Now your image height works.

Alternative solution: Since you're telling your image to be max-height: 100%, of a container with max-height: 700px, why not also tell the image to be max-height: 700px? This takes you around the percentage height problem.

More information:

0

You are very close, you just need to change the maxheight to height. Height has to be on the parent for the child element's 100% to work:

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  height: 700px; /* max-height: 700px; */
}

#largephotohold IMG {
  max-height: 100%;
  max-width: 100%;
}
<DIV id="largephotohold">
<img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>
0

max-height: 400px; (on the div) means that the content of this div (and it's height) will vary. It might be 100px or 600px, we don't know. max-height: 400px; limits the height of the div. If the content is 200px, div will also be 200px. If the content is 500px, div will be 400px, but now we have extra 100px. In this case, you need to set overflow: auto or overflow: hidden on the div. If you don't, the content (your image) will stick out/overflow.

JSFiddle: Check the bottom of the div, see where the border ends and the image overflows.

In your example, div covers the 90% of the body and its max-height is set to 400px. You don't have a style to deal with the overflow.

#largephotohold {
    width: 90%;
    max-height: 700px; /* 400px in jsfiddle */
}
#largephotohold IMG {
    max-height: 100%;
    max-width: 100%;
}

And using max- properties on an image seems a bit pointless. Image is not a container. It's the content itself. It should have its width and/or height set.

What you should do is set overflow: auto or overflow: hidden on your div, and width 100% on the image. Your image will be as wide as the div, and it's height will overflow the div.

JSFiddle

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 2%;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  max-height: 400px;
  overflow: auto; /* or hidden */
}

#largephotohold IMG {
  width: 100%;
}
<DIV id="largephotohold">
  <img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.