Problem z wyliczaniem wielkości obrazka na podstawie wielkości okna

Question

Szanowni, 

to mój pierwszy post na forum, tak że na samym początku chciałbym Was pozdrowić i przywitać się.

Żeby nie zanudzać, przejdę do meritum: mam problem z kodem JavaScript, który generalnie działa, ale nie dokońca tak, jakbym chciał, a mianowicie...

Na jsfiddle wrzuciłem podgląd poniższego skryptu

function setImgSize(img, aspectRatio) {

    var windowHeight = $(window).height();
    var windowWidth  = $(window).width();


    if (windowWidth/windowHeight >= aspectRatio)
    {
        img.height(windowHeight);
        img.width(windowHeight * aspectRatio);
    }
    else
    {
        img.width(windowWidth);
        img.height(windowWidth / aspectRatio);
	}
				
}
			
$(window).on('load', function(){
	img = $('#img');
	imgAspectRatio = img.width() / img.height();

	setImgSize(img, imgAspectRatio);
});
						
$(window).on('resize', function(){
	setImgSize(img, imgAspectRatio);
});

$('body').on('click', function(){
	alert("Image width: "+ img.width() 
          + "\nImage height: " + img.height() 
          + "\nImage aspect ratio base: " + imgAspectRatio 
          + "\nImage aspect ratio current: " + img.width()/img.height() 
          + "\n\nWindow width: " + $(window).width() 
          + "\nWindow height: " + $(window).height() 
          + "\nWindow aspect ratio: " + $(window).width()/$(window).height());
});

W skrypcie tym ustawiam wielkość obrazka względem rozmiaru okna. Założenie jest takie, że obrazek zawsze ma mieć startowe proporcje (te zapisuję w zmiennej imgAspectRatio, a uzyskuję je dzieląc startową szerokość przez startową wysokość obrazka. 

Następnie wywołuję metodę ustawiającą rozmiary obrazka. W tym celu pobieram szerokość i wysokość viewportu i ustalam jego aspect ratio. Jeśli jest ono większe lub równe niż aspect ratio obrazka, wtedy obrazek otrzymuje wysokość viewportu, a szerokość jest wyliczana ze wzoru windowHeight * imgAspectRatio. W przeciwnym wypadku to szerokość obrazka jest ustawiana na szerokość viewportu, a wysokość obliczana wzorem windowWidth / imgAspectRatio.

I matematycznie się niby wszystko zgadza. Dla przykładu:

1920/1080 = 16/9 = 1,777777777777778
1024/768 = 4/3 = 1,333333333333333

​1920 / 1,777777777777778 = 1080
1080 * 1,777777777777778 = 1920

1024 / 1,333333333333333 = 768
768 * 1,333333333333333 = 1024

Niestety rodzą się dwa problemy z wykorzystaniem powyższego skryptu JS:

1. W większości przypadków odświeżenie okna przeglądarki (lub uruchomienie opcji "RUN" na jsfiddle) sprawia, że obrazek nie dostaje odpowiedniej szerokości lub wysokości w zależności od aspect ratio viewportu, ale nieco mniejsze. Jeśli zrobić resize, to wszystko zaczyna wyglądać jak należy (poza wyjątkiem z punktu 2), ale ponowne odświeżenie znów generuje problem. 
   
   Nie ma też znaczenia, czy używam window.onload(), $(window).on('load', callback), $('#img').load() - po prostu przy ładowaniu strony rozmiar obrazka jest wyliczany w większości sytuacji niepoprawnie.
    
2. W sytuacji, kiedy aspect ratio viewportu jest nieznacznie większe od aspect ratio obrazka i zaczniemy zmniejszać szerokość okna, to skalowanie obrazka odbywa się skokowo. Problem nie występuje przy czynności odwrotnej, czyli kiedy aspect ratio viewportu jest mniejsze niż obrazka i zaczynamy je powiększać.

Nie jest to coś, co przeszkadza mi jakoś drastycznie i dla moich potrzeb jest w zupełności akceptowalne, ale chciałbym wiedzieć, czy da się to jakoś poprawić, czy to jednak jakiś bug. Czy może ja coś źle robię i źle kombinuję.

Dzięki z góry za pochylenie się nad moim problemem.

Pozdrawiam!
Tomek

 

Answer 1

var windowHeight = $(window).innerHeight();
var windowWidth  = $(window).innerWidth();
//chyba
//spróbuj też zamiast pobierać rozmiar okna, to dokumentu.

 

Comments

Hmmm... dziwna sprawa, ale pomogło co innego (na pierwszy problem). Co prawda nie ma czegoś takiego, jak $(window).innerWidth(), ale jest window.innerWidth oraz analogicznie dla wysokości.

Co ciekawe, zamiana na window.innerWidth i window.innerHeight pomogła na skalowanie obrazka tuż przy ładowaniu, ale jest to o tyle dziwne, że zarówno czysty JS jak i JQuery zwracają tymi metodami dokładnie te same dane. 

http://jsfiddle.net/au5h7ep3/1/

Jak sobie odkomentujesz alert, to zobaczysz, że dane są identyczne, bez względu na zastosowaną metodę pozyskania zmiennych windowWidth i windowHeight. Jednak przy użyciu JS działa, a JQuery nie.

 

---

1. http://api.jquery.com/innerwidth/
2. Ogólnie bez różnicy. Jak działa window.innerHeight, to po co męczyć się z przerobieniem tego na jquery.

Answer 2

Może problem dotyczy operacji arytmetycznych w JS?

Poczytaj tutaj: http://kursjs.pl/kurs/math.html#mnozenie

Comments

Bardzo dziękuję za podpowiedź. Myślę, że to może mieć wpływ na te skokowe zmiany przy pomniejszaniu viewportu. Wieczorem się tym zajmę i zobaczę, jaki będzie efekt :)