Css Image Resize based on height

Question

I am aware of resizing images bases on width:

img{
  max-width: 100%;
  height: auto;
}

or

img{
  width: 500px;
  height: auto;
}

Is there a way to do it by height? This does not seem to work:

img{
  height: 500px;
  width: auto;
}

How can I do this?

Answer 1

From what you have shown it should work fine.

img{
  height: 500px;
  width: auto;
}

The above code does work, make sure it's not in a restrictive div, or another style is overwriting it

Answer 2

You in fact can explicitly declare a height of 100px (for example) with height: 100px;. If your code isn't working this way, there may be something else outside of this context that is causing the problem.