CODEWITHSUNDEEP
htmlcss
Milo Gertjejansen
Milo Gertjejansen

Reputation: 511

Preserve image aspect ratio with the height fixed

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.

Upvotes: 6

Views: 11968

Answers (1)

acdcjunior
acdcjunior

Reputation: 135832

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.

sample image

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

Upvotes: 7

Related Questions