Sitenize yüklediğiniz resimlerin yükseklik ve genişliği oranında yeniden istenilen genişliğe veya yüksekliğe göre yeniden boyutlandırma örneği. Sayfa yüklenince yeni boyutuyla görünmektedir. 

Head etiketleri arasına katacağımız kod

<script type="text/javascript" src="jquery.js"></script>
    $(window).load(function()
    {
        var resim_genislik = $(".urun_resim").width();
        var resim_yukseklik = $(".urun_resim").height();
        if ((isNaN(resim_genislik) == false) && (isNaN(resim_yukseklik) == false))
        {
            if (resim_genislik > 0 && resim_yukseklik > 0)
            {
                var resim_oran = resim_genislik/resim_yukseklik;
                var varsayilan_genislik = 300;
                var varsayilan_yukseklik = varsayilan_genislik / resim_oran;
                $(".urun_resim").css({width : "" + varsayilan_genislik + "", height : "" + varsayilan_yukseklik + ""});
            }
        }
    });

Body etiketleri arasına katacağımız kod

<img class="urun_resim" src="resim.png" alt="" />

http://www.ontedi.com/javascript/jquery-ile-resimi-orantili-olarak-yeniden-boyutlandirmak.html

O halde şunuda ekleyelim komple sayfada ne kadar resim varsa ve class atamak istemiyorsanız;

$(".urun_resim").css(

bölümünü

$("img").css(

olarak değiştirip durumu kurtarabiliriz ?.

Eline sağlık.

Benim verdiğim örnek, genişliği 300px yüksekliği ise o oranda olan yükseklik kadar geçerli olur.

resim e css ten class atayıpta yapabılırız bunu 

ontedi bunu yazdı:
-----------------------------

Benim verdiğim örnek, genişliği 300px yüksekliği ise o oranda olan yükseklik kadar geçerli olur.

-----------------------------

aynısını maxwidth: 300px yaparak css le de çözersin

küçükleri büyütmez büyüklerin genişliğini 300 yüksekliğini de oranına göre ayarlar.

--

trafik ve site yüklenme hızı açısından bakarsak resmi gerçekten boyutlandırmak en mantıklısı