How to make image fit window height?

Question

I'd like to set an image to match the height of my page minus top menu (50px). Also, I'm using twitter bootstrap 3 and I know it's got img-responsive class, which is great and I'd like to use this class in combination with making the image height=100%-50px.

How can I do that?

Answer 1

If you want combine percents with pixel you can use css3 property calc():

height: calc(100% - 50px);

Supported by IE9+