Görüntü en boy oranını sabit yüksekliğiyle koruyun

Question

Bir tablodaki bazı simgelerle çalışıyorum ve simgelerin en boy oranını tutmaya çalışıyorum.

Tüm yüksekliklerin aynı olması gerekir (18px) ancak genişlik değişebilir. genişlik sabittir ve yüksekliği Bazı örnek kod (tablodaki en azından bir tek hücre) zaman tablosu için aşağıdaki olan this solution

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

aşağıdaki gibi otomatik olarak ayarlandığında

Bunlar için başka çözümler gördük

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

ne yapmak istiyorum 18px de resmin yüksekliğini tutmak ve genişlik boy oranını uyan ne olursa olsun sahip olmaktır.

Ayrıca, tarayıcılar hakkında hiçbir özellik yok. Yani eğer CSS3 alırsa ya da her neyse, fark etmez.

Answer 1

Yapmak istediğim şey, resmin yüksekliğini 18px'de tutmak ve genişliğin en boy oranına uyan her şeye sahip olmasını sağlamaktır.

İstediğin yapar: Eğer küçük küçük görüntülerini tutmak istiyorsanız

img { 
    height: 18px; 
} 

See demo here.

unutmayın max-heigth yerine height arasında kullanılabilir.