Reliability of 100% height image + maintaining ratio with CSS

Is this CSS for sizing an <img> to 100% height and maintaining the ratio reliable (cross-browser)?

#reel img
{
    height: 100%;
    width: auto;
}

It seems to work on what browsers I have, but I'm sceptical of the auto value.

2012-04-04 06:55
by Marty

Short answer: yes. That's how you do it. Not sure what more to add. Edit: You could add !important to the auto-rule just in case the img has an inline width attribute. Edit2: Actually the !important doesn't seem necessary: http://jsfiddle.net/Z7ME8/

2012-04-04 07:06
by powerbuoy

Thanks, just didn't want to end up finding out that a large chunk of browsers render the width weird - Marty 2012-04-04 07:33

I understand. They shouldn't though - powerbuoy 2012-04-04 07:59