Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

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

Merhaba yine sizlere bomba gibi bir soruyla geldim. Aslında çok zor olmamkla birlikte eminim çok da basittir ama kafam karıştı bir türlü mantığı uygulayamadım. Soruya geçelim :)

1600 x 800 Tarayıcı penceremiz açılıyor.

Sayfa içeriğinde 1024 x 660 ebatlarında resim var css class'ıda "GaleriOlcu'dur.
 .GaleriOlcu { width : 1024 ; height : 660 }



İstediğim ; tarayıcı sayfa genişliği değiştikçe içerikteki resmin genişliğide aynı oranda küçülsün istiyorum.

Gördüğünüz gibi basit ama yapamadım :(

    $(document).ready(function(){  
  boyutlandirHele();    
});

$(window).resize(function() {
  boyutlandirHele(); 
});

function boyutlandirHele() { 

// Pencere değerlerini alıyoruz
    var winwidth  = $(window).width(); // pencere genişliği
    var winheight = $(window).height(); // pencere yüksekliği
    var pencereoran = Math.round( winwidth / winheight );
    
    var genislik =  $(".GaleriOlcu").width();
    var yukseklik =  $(".GaleriOlcu").innerHeight();
    var gelerioran = Math.round( genislik / yukseklik );

    var teytey = Math.round(( 660 - yukseklik ) / 2 );

 

  $(".GaleriOlcu").css({'height': yukseklik, 'width': genislik, 'margin-top':bosluk}); 
  $(".Geleri-Sol").css({'width':genislik});

}
+0
-1
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • Hasan adlı üyenin fotoğrafı
    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

  • xuma adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    10 yıl önce güncellenmiş
    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 adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı SeyfiCiftci
      Çalıştıramadım ben :S
      10 yıl önce yazılmış
    • xuma adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı 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 adlı üyenin fotoğrafı 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ış