Mantieni proporzioni dell'immagine con l'altezza fissa

Question

Sto lavorando con alcune icone in una tabella e sto cercando di mantenere le proporzioni delle icone.

Le altezze devono essere tutte uguali (18 px) ma la larghezza può variare.

ho visto altre soluzioni per questi quando la larghezza è fissa e l'altezza è impostata su auto come qui di seguito this solution

img { 
    width: 75px; 
    height: auto; 
} 

Alcuni codice di esempio è seguito per il mio tavolo (almeno una sola cella della tabella)

<td class="set_symbol" style="text-align: center;"> 
    <img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="height: 18px;"> 
</td> 

Quello che vorrei fare è di mantenere l'altezza dell'immagine a 18px e hanno la larghezza sia qualunque sia adatta il rapporto di aspetto.

Inoltre, non ho dubbi sui browser. Quindi se prende CSS3 o qualsiasi altra cosa, non importa.

Answer 1

Quello che mi piacerebbe fare è mantenere l'altezza dell'immagine a 18px e avere la larghezza che si adatta alle proporzioni.

Questo non fa ciò che si vuole:

img { 
    height: 18px; 
} 

See demo here.

tenere a mente, max-heigth possono essere utilizzati al posto di height se si desidera mantenere piccole immagini di piccole dimensioni.