HTML'deki görüntüyü yüzde olarak parametreler olarak nasıl yeniden boyutlandırılır?

Question

Web sitemdeki bir resmi yeniden boyutlandırmak istiyorum. Görüntüyü yeniden boyutlandırarak veya genişlik ve yükseklik hesaplayarak ve değerleri piksel olarak ayarlayarak bunu nasıl yapacağımı biliyorum. Ama aynı resmi farklı dimmisyonlarla birden çok kez kullanıyorum, bu yüzden görüntüyü kendi boyutuna göre yeniden boyutlandırabilirsem daha az zaman harcardım.

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/> 

Bunu denedim, ancak sorun, boyutun ana öğesine göre ayarlanmış olmasıdır.

Answer 1

Tek başına HTML veya CSS kullanarak otomatik olarak istediğiniz şeyi yapmak için bir yolu yoktur. Görüntünün boyutlarını almak için JavaScript kullanmanız, daha sonra bu boyutların yüzdesini hesaplamanız ve görüntüye yeniden uygulamalısınız.

Answer 2

Bir yöntem var, ancak mükemmel değil. Ekranı 'satır içi' olarak ayarlanmış bir sarma elemanı gerektirir ve görüntü 'maksimum genişlik' kullanılarak yeniden boyutlandırılır.

Sorun, ana öğenin, görüntünün gereksinimlerine bağlı olarak sorunlara yol açabilecek şekilde orijinal genişliğini koruduğudur.

Örnek: http://jsfiddle.net/amustill/GnEw5/