Jquery İle Resimi Orantılı Olarak Yeniden Boyutlandırmak

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

Jquery İle Resimi Orantılı Olarak Yeniden Boyutlandırmak

07/Şub/12 21:04

Kısayol

Şikayet

Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

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

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap

07/Şub/12 21:14 Kısayol Şikayet Özel Mesaj

Maresca

Kayıt Tarihi: 24/Mayıs/2012

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.

Gel bili bili gates

Alıntı yap
07/Şub/12 21:26 Kısayol Şikayet Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

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

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap
07/Şub/12 21:42 Kısayol Şikayet Özel Mesaj

hipokondriyak

Kayıt Tarihi: 02/Temmuz/2007

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

Homo sapiens, yaşamak için, diğer canlıların yaşamasına muhtaç; obligat parazit türüdür. "Sen olursan boş bardak , sana olur koyan çok su. a.g."

Alıntı yap
07/Şub/12 22:40 Kısayol Şikayet Özel Mesaj

KodlayanAdam

Kayıt Tarihi: 01/Ekim/2005

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ı

Hiç savaş görmemiş çocuklarla, hiç barış görüşmemiş çocuklar için adalet farklı anlamlar taşır.

Alıntı yap

Toplam Hit: 1966 Toplam Mesaj: 5

Cevapla