Merhaba arkadaşlar,
Birkaç yıl olmuştur bu kodu yazalı ama arada gidip alıp kullanıyorum, sizinle de paylaşmak istedim umarım işinize yarar. Buraya tıklayarak aşağıdaki kodun ne işe yaradığını anlayabilirsiniz // Sayfada büyük resim olduğu için yüklenmesi uzun sürebilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$('img').load(function() { var parentH = $( this ).parent().outerHeight(); var parentW = $( this ).parent().outerWidth(); var iH = $( this ).outerHeight(); var iW = $( this ).outerWidth(); var rate, newRate = 0; rate = parentW / iW; newRate = rate * iH; if(parentH > newRate) rate = parentH / iH; $( this ).css({ width : rate*iW, height : rate*iH, position : 'absolute', top : -( ( ( rate*iH ) - parentH ) / 2 ), left : -( ( ( rate*iW ) - parentW ) / 2 ) }); }).each(function() { if(this.complete) $(this).load(); }); |
Burada asıl önemli olan kısım resmin yüklenip yüklenmediğini kontrol etmek (jquery img load). Burada kullandığım resim yüklenme kodunu stackoverflow‘dan buldum ( Nick Craver )
|
1 2 3 4 5 6 7 8 |
$('img').load(function() { // Yuklenince yapilacak islemler }).each(function() { if(this.complete) $(this).load(); }); |
Resimlerin kesin yüklendiğini anladıktan sonra, resmin orjinal boyutlarını alıyorum, ondan sonra resmi kapsayan element’in boyutlarını alıp oran / orantı yapıp resme yeni boyutunu ve pozisyonunu veriyorum. Burada img’i kapsayan elementin width, height ve overflow:hiden değerinin olması gerekir.