I’m have an image which is limited to 70% of the screen size. This is great for mobile or tiled displays. However, for full screen the image takes up almost all of the screen. Therefore, I would like to restrict the image to take up at most 40% of the height of the screen.

My current code is:

.test_image {
    width: 70%;
    max-height: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

However, the max-height doesn’t appear to have any effect, if I make the browser wide and short then the image still takes up the full height of the screen.

What am I doing wrong and how do I fix it?