Preserve image aspect ratio with the height fixed
css, html
Solution
What I would like to do is to keep the height of the image at 18px and have the width be whatever fits the aspect ratio.
This does what you want:
img {
height: 18px;
}
See demo here.
Keep in mind, `max-heigth` can be used instead of `height` if you want to keep small images small.
Problem
I am working with some icons in a table and I am looking to keep the aspect ratio of the icons. The heights all have to be the same (18px) but the width can vary. I have seen other solutions for these when the width is fixed and height is set to auto like below this solution ``` img { width: 75px; height: auto; } ``` Some sample code is below for my table (at least just one cell in the table) ``` <td class="set_symbol" style="text-align: center;"> <img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="height: 18px;"> </td> ``` What I would like to do is to keep the height of the image at 18px and have the width be whatever fits the aspect ratio. Also, I have no qualms about browsers. So if it takes CSS3 or whatever, doesn't matter.