jQuery ile Resimi Orantılı Olarak Yeniden Boyutlandırmak

Küçük bir CSS hilesi ile JavaScript taraflı olarak bir resmi orantılı şekilde boyutlandırma işlemi yapacağız. Örnek olarak sayfamızda class="urun_resim" şeklinde css sınıflı resimler olsun.
CSS ile Çözüm

<img src="resim1.jpg" class="urun_resim" />
<img src="resim2.jpg" class="urun_resim" />
<img src="resim3.jpg" class="urun_resim" />
<img src="resim4.jpg" class="urun_resim" />
<img src="resim5.jpg" class="urun_resim" />

CSS ile bu resimlerin genişliğini = 120px ve yüksekliğini de görüntüyü bozmayacak şekilde otomatik olarak oranlı bir şekilde olmasını sağlayalım. Yani yükseklik genişliğe göre kendini otomatik ayarlasın.
CSS ile Çözüm

.urun_resim{width:120px;height:auto;}

CSS ile yapmış olduğumuz çözümü test edelim. Görüldüğü gibi bütün resimler farklı boyutlarda. CSS ile genişliği 120px ile sabitle, yüksekliği de ona göre otomatik ayarlamasını istedik.
CSS Örnek

---

Bu örneğimizi jQuery ile kısa bir şekilde yapacağız. class="urun_resim" nitelikli tüm resimlere genişlik ve yükseklik atamasını sayfa yüklendiğinde vermiş olacağız.
jQuery ile Çözüm

jQuery(document).ready(function () {
   jQuery(".urun_resim").css({"width":"120px", "height":"auto"});
});

jQuery Örnek