Reliability of 100% height image + maintaining ratio with CSS

Go To


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:

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