HTML / CSS / Javascript Image Resizing Hakkında

18/May/12 10:41

Kısayol

Şikayet

Özel Mesaj

JPriest

Kayıt Tarihi: 09/Mart/2007

Selamlar,

"<center><img src=\"" + imageLink + "\" /></center>"

şeklinde bir yapım var. Link değişken, oradan gelecek olan imagelerin boyutu değişken, boyutlar arasındaki oran değişken, bunu görüntüleyecek olan cihazların boyutu da değişken. Image tagine width ve height vererek sabit bir boyuta getirebiliyoruz fakat aradığım o değil çünkü gelen image'in width/height oranı da değişken. Sabit oran kullanırsam kötü görünebiliyor ya da küçük bir image geldiğinde onu büyütürsem kalite düşüyor.

İstediğim şu: image'in kaplayabileceği max width değerlerini hesaplayıp tutabildiğimi düşünelim [W olsun]. Eğer gelen image'in width değeri W'ya küçük ya da eşitse geldiği gibi görünsün ama eğer W'dan büyükse width değerini W değerine eşitleyip, aynı oranda height değerini de düşürüp image'i öyle göstermek.

Android'in native tarayıcısı üzerinde çalışacak herhangi bir HTML, CSS, JavaScript, jQuery vs yöntem ne olursa kabulumdür. İstediğim şey yapılabilecek bir şey mi?

Sen hiç kaval çaldın mı?

Alıntı yap

18/May/12 11:07

Kısayol

Şikayet

Özel Mesaj

Hybris

Kayıt Tarihi: 12/Haziran/2007

function fiximg(){
$genislik   = $(document).width();
$yukseklik  = $(window).height();
document.getElementById('resim').style.width = $genislik;
document.getElementById('resim').style.height = $yukseklik;
}
 
javascriptten pek anlamam ama verdiğim kod ile idsi resim olan elementi tarayıcıya tam görünüm yaptırabilirsin sanırım.
 
resminin 200*400 olduğunu varsayalım.
 
önce tarayıcının alabileceği max genişliği ve yüksekliği alacaksın ekranın çeyreğini kaplamasını istiyosan /4 yapacaksın
 
atıyorum çeyrek yükseklik 500 px çıktı. senin 400 px olan resminin yüksekliğini de 500 px e eşitleyeceksin.
 
oran için 400 x B = 500 den B yi bulacaksın.
 
sonra da B x 200 diyip genişliği vereceksin.
 
yani 250*500 ekranda olacak.
 
tam hakim olamadığım için javascripte yazamam ama mantığı budur yazacak biri çıkar zaten.

                    agile isn’t how fast you can go, it’s how fast you can turn.

Alıntı yap

18/May/12 11:27

Kısayol

Şikayet

Özel Mesaj

snnyk

Kayıt Tarihi: 28/Mayıs/2007

yukseklige bi deger vermez ise zaten kendi oranlar yüksekliği enine göre

Jquery dahil et bi dene bakalım ben bahsettiğin tarayıcıda test edemedim ama desteklemesi lazım

 	var imageLink		= "http://www.tahribat.com/img/forum/avatars/Penguen.jpg"; 
	var imageLink2		= "http://imgkelebek.hurriyet.com.tr/LiveImages/G%C3%BCzelim/624/Ay%C5%9Fe%20Hatun%20%C3%96nal/_MG_9546.jpg"; 
	
 	document.write("<center><img src="+imageLink+" /></center>");
	document.write("<center><img src="+imageLink2+" /></center>");
	
	 				
	$(document).ready(function() {
    $("img").load(function() {
       imgwid	= $(this).width();
	   alanwid	= $(document).width(); //50;
	   
	   if(imgwid>alanwid)
	   {
		  $("img").css("width",alanwid); 
	   }

	   
    });
});

snnyk.com - code is poetry all that i know...

Alıntı yap

18/May/12 11:29

Kısayol

Şikayet

Özel Mesaj

JPriest

Kayıt Tarihi: 09/Mart/2007

Biraz 'kendin pişir kendin ye' oldu ama CSS'de direkt öyle bir şey varmış.

.my_img {
	max-width: 500px;
	/* Resize the image for IE6 */
	width: expression(this.width > 500 ? 500: true);
}

Kullanırken de:

<img class="my_img" src="my-image.jpg" />

@Hybris
Hoca sen de sağol, JavaScript'e gerek kalmadı.

Ayrıca şunları bulduğum yerde de bir JavaScript vardı:

function resizePhoto() {
	if (document.getElementById('photo_id')) {
		photo = document.getElementById('photo_id');
 
		if (photo.width > 500) {
			photo.width = 500;
		}
	}
}

Sen hiç kaval çaldın mı?

Alıntı yap

18/May/12 11:32

Kısayol

Şikayet

Özel Mesaj

JPriest

Kayıt Tarihi: 09/Mart/2007

@snnyk

Eyvallah hoca, konu altında bulunsun. Şimdilik CSS ile hallettim, bakalım ilerde işime yarayabilir başka yerlerde.

Sen hiç kaval çaldın mı?

Alıntı yap

18/May/12 12:18

Kısayol

Şikayet

Özel Mesaj

camarade
ontedi

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

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

Biraz kurcalarsan bir şeyler çıkabilir.

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

Alıntı yap

18/May/12 12:21

Kısayol

Şikayet

Özel Mesaj

FOXXLY

Kayıt Tarihi: 19/Haziran/2006

<imgstyle="max-width:600px"

şu şekilde yaptığım zaman hiç bozmadan küçültüyor. aynı zamanda yükseliğide ene oranla küçütüyor. burada sadece width den bahsedilmiş 
ama height i de oranlayıp küçültüyor.

asp,php vs ne kullanıyorsan replace ile img tagını bu şekilde düzeltebilirsin. 
not: android telefonumdada küçültüyor.

kelimeler albayım bazı anlamlara gelmiyor.

Alıntı yap