Bir adet wallpaperı sayfaya width:400px; şeklide koyduk. Bu resmin altına da çözünürlük seçenekleri koyduk (1024x768, 768x1024, 1366x768 vs vs).Ziyaretçi çözünürlük seçeneklerinden birine tıkladı ve wallpaperın üstüne saydam bir div attık ve bu divi kullanıcının istediği çözünürlüğe ve width:400px; görünümündeki wallpapera göre enini boyunuu belirlerdik.
Denklemin bilinenleri şunlar;
var wallen // wallpaperın gerçek eni
var wallboy // wallpaperın gerçek boyu
var yenien // ziyaretçinin istediği çözünürlüğün eni
var yeniboy // zitaretçinin istediği çözünürlüğün boyu
var gorunenen = 400; // wallpaperın sayfada görünen eni (px)
var gorunenboy = Math.floor( (gorunenen * wallboy) / wallen ); // wallpaperın sayfada görünen boyu
var saydamenx = Math.floor( (yeniboy * wallen) / wallboy ); /*saydam divin boyunu görünen boyla eşitlersek en kaç px olur*/
var saydamboyx = Math.floor( (yenien * wallboy) / wallen ); /*saydam divin enini gorunen enle eşitlersek boy kaç px olur*/
if( saydamenx >= yenien ){
saydamboy = gorunenboy;
saydamen = Math.floor( (saydamboy * yenien) / yeniboy );
}else{
saydamen = gorunenen;
saydamboy = Math.floor( (saydamen * yeniboy) / yenien );
}
ifli yapıda da saydam divin enini ve boyunu belirledik.saydamen ve saydamboy, resmin üstündeki saydam divin eni ve boyunu temsil ediyor.Ziyaretçi 768*1024 çözünürlüğe tıkladı farzedersek görünüm şöyle oldu;
Görseldeki bilinen değerler;
saydam divien eni ve boyu (saydamen,saydamboy)
wallpaperın gerçek eni ve boyu (wallen, wallboy)
wallpaperın sayfada görünen eni ve boyu (gorunenen,gorunenboy)
ziyaretçinin istediği en ve boy (yenien, yeniboy)
saydamdivin resmin solundan uzaklığı (solfark)
İstenen veri;
Sayfadaki boyutlarla saydam divin, resmin solundan uzaklığı solfark'sa (biliniyor), resim istenen boyuta göre kırpılırken resmin solundan kaç px kırpılması gerekir.
.
.
