jQuery ile Tarayıcı Penceresine oranla bir nesneyi...

Doğru Cevap

10 yıl önce yazılmış

63 cevap - 0 soru

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
   <script src="http://code.jquery.com/jquery.min.js"></script>
	<style type="text/css">img {height: 100%; width: 100%;} .GaleriOlcu { width:1024px; height:660px; }</style>
</head>
   <body>
		<div class="GaleriOlcu">
		
			<img src="http://www.deftune.com/wp-content/uploads/2010/10/thexx-400x400.jpg" alt="" title="" id="resim"/>
			
		</div>
		
		
		
		<script>
			function imgsize(firstW,firstH) {
				var W = $(window).width(),
					H = $(window).height();
			
				var newImageWidth = firstW * W;
				var newImageHeight = firstH * H;
				if(W > newImageWidth)
					$('.GaleriOlcu').height(newImageHeight).width((newImageWidth));
			}
			
			function findWidthRatio(){
				var W = $(window).width(),
					H = $(window).height();
				
				var imgw = $('.GaleriOlcu').width();
				
				var ratioW = imgw/W;
				return ratioW;
			}
			
			function  findHeightRatio(){
				var H = $(window).height();
				var imgh = $('.GaleriOlcu').height();
				
				var ratioH= imgh/H; 
				return ratioH;
			}
			
			
			$(document).ready(function(){
				var firstWidthRatio = findWidthRatio();
				var firstHeightRatio = findHeightRatio();		
				$(window).bind('resize', function() { imgsize(firstWidthRatio,firstHeightRatio); });
			});
		</script>


   </body>

Cevaplar

10 yıl önce yazılmış

10 yıl önce güncellenmiş

xuma

171 cevap - 1 soru

İlk olarak niye css ile yapmıyorsun diyerek sorayım :)

<div id="tasiyici">
    <img src="http://placehold.it/600x600" alt="" title=""/>
</div>

#tasiyici { position: relative; }
img { width: 100%; display: block; }

bu şekilde tasiyici değiştikçe resimde değişir.Jquery ile ise;

function yeniGenislik(yukseklik)
{
	var genislik=$(window).width();
	var yukseklik=$(window).height();
	var oran=genislik/yukseklik;
	return yukseklik*oran;		
}
$(window).bind('resize', function() { 
    $('#resim').height(yeniGenislik($('#resim').height()));

});

SeyfiCiftci
Css ile olmayacağını sanıyorum , jQuery ile yazmış olduğunuz sistemde document.ready durumunda da çalıştırmamız gerekiyor ve genişlik demişiniz fonksiyonun adına ama yükseklik değeri ile yapmışınız ? Kontrol edermisiniz acaba :)

10 yıl önce yazılmış
SeyfiCiftci
Ve iki tane yükseklik değişkeni var birincisi fonksiyona gire yukseklik ikinciisi pencerenin yüksekliği olan yukseklik hangisi acaba :)

10 yıl önce yazılmış

xuma

En boy oranı ile boşu boşuna bir süre uğraştım.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
   <body>
 		<img src="http://placehold.it/600x600" alt="" title="" id="resim"/>
   </body>
   <script src="http://code.jquery.com/jquery.min.js"></script>
<script>
	$(function(){
		$orjinalG=$('#resim').width();
		$resim = ($(window).width()/$orjinalG)*$orjinalG > $orjinalG ? $orjinalG : ($(window).width()/$orjinalG)*$orjinalG;		
		$('#resim').width($resim);
	});
	function ResimBoyut(resim_genislik,og)
	{
	   	var genislik=$(window).width();
    	var Goran=genislik/resim_genislik;
    	console.log("GENİŞLİK : "+genislik+" YENİ GENİŞLİK : "+(Goran*resim_genislik));
    	return (Goran*resim_genislik>og) ? og : Goran*resim_genislik;
    }
	$(window).bind('resize', function() { 	    
	   $('#resim').width(ResimBoyut($('#resim').width(),$orjinalG));
	});
</script>

</html>

10 yıl önce yazılmış

SeyfiCiftci
Çalıştıramadım ben :S

10 yıl önce yazılmış

xuma

Ufak bir düzeltme daha :) Document Ready'de resim boyutunu 0 alıyordu.

$(window).load(function(){
		$orjinalG=$('#resim').width();
		console.log("Genişlik:"+ $orjinalG);
	});
	
	function ResimBoyut(resim_genislik,og)
	{
	   	var genislik=$(window).width();
    	var Goran=genislik/resim_genislik;
    	console.log("GENİŞLİK :"+genislik+" YENİ GENİŞLİK :"+(Goran*resim_genislik)+" GORAN :"+resim_genislik);
    	return (Goran*resim_genislik>og) ? og : Goran*resim_genislik;
    }
	$(window).bind('resize', function() { 	    
	   $('#resim').width(ResimBoyut($('#resim').width(),$orjinalG));
	});

10 yıl önce yazılmış 10 yıl önce güncellenmiş

SeyfiCiftci
Dostum çok teşekkür ederim ama :)
Bu yapmış olduğunuz betikte tarayıcının genişliği resmin genişliğine eşit olup ve daha küçüldüğünde çalışıyor. Benim derdim yukarıda da belirttiğim gibi eşit oranda küçülmesini istiyorum. Örn ;
Tarayıcı
G:1600
Y:800

Resim
G:1024
Y:660

-----------------
Yeni genişlik
Tarayıcı
G:1000
Y:800

farkı "400 px" koruyarak küçülmesi"

Resim
G:600
Y: --

İlginiz için çok teşekkür ederim Allah razı olsun..

10 yıl önce yazılmış

xuma

Sanırım ben konuyu tam anlayamıyorum o yüzden cevabı diğer arkadaşlara bırakayım ama son olarak anladığım kadarını tekrar yazayım :)

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>

</head>
   <body>
 		<img src="http://placehold.it/400x400" alt="" title="" id="resim"/>
   </body>
   <script src="http://code.jquery.com/jquery.min.js"></script>
<script>
	$(window).load(function(){
		$orjinalG=$('#resim').width();
		//$resim=($(window).width()/$orjinalG*$orjinalG>$orjinalG) ? $orjinalG : $(window).width()/$orjinalG*$orjinalG;
		$('#resim').width($resim);
		$fark=$(window).width()-$orjinalG;
	});
	function ResimBoyut(resim_genislik,og,frk)
	{
	   	var genislik=$(window).width();
    	var Goran=genislik/resim_genislik;
    	return  (Goran*resim_genislik)-frk;
    }
	$(window).bind('resize', function() { 	    
	   $('#resim').width(ResimBoyut($('#resim').width(),$orjinalG,$fark));
	});
</script>

</html>

10 yıl önce yazılmış

SeyfiCiftci
Şimdi anlamışınız sorunu yazdığınız algoritma doğru ama çalıştıramadım ben :S

10 yıl önce yazılmış

SeyfiCiftci

jQuery ile Tarayıcı Penceresine oranla bir nesneyi boyutlandırmak

Doğru Cevap

Cevaplar