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>