Preserve image aspect ratio with the height fixed

Question

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.

@stackErr I actually tried that and since the original images are 200px to 300px wide, it gives them a very wide look. I would like to preserve the aspect ratio while keeping the height at 18px. — Milo Gertjejansen, Jul 10 '13 at 03:05

score 7 · Accepted Answer · edited Oct 09 '14 at 11:38

7

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;
}

sample image

Keep in mind, max-heigth can be used instead of height if you want to keep small images small.

edited Oct 09 '14 at 11:38

Faisal Ashfaq

answered Jul 10 '13 at 03:10

acdcjunior

1 Answers1