I am building a small portfolio site for myself and have come across an odd quirk. I have an image inside a container, and to allow for multiple screen sizes, I am setting all dimensions in % rather than pixels.

in iphone portrait mode, everything is fine. However in landscape mode, my image bursts out of its container, completely ignoring the max-height:100%; rule that works fine in portrait.

code:

#centralident{
position:relative;
width:50%;
height:50%;
box-shadow: 0 0 10px black;
margin-left:25%;
margin-top:13%;
}


#centralident img{
max-height:100%;
}