Skalowanie obrazków przydaje się gdy ktoś da za duże zdjęcie i strona się rozciąga.

W tym tutorialu opiszę jak zeskalować obrazek używając Javascript. Na wstępie zaznaczę, że podobne rozwiązanie jest użyte w moim skrypcie Fafu Board.

To do dzieła!
Aby zeskalować obrazek potrzebujemy pobrać jego wysokość oraz szerokość. Niestety aby to zrobić obrazek musi być do końca załadowany dlatego użyjemy zdarzenia onload w tagu html . Wstawimy tam funkcję resize_image() z odwołaniem do tego obrazka (this).
<img src="obraz.jpg" onload="resize_image(this);">
Dobra, kod html już mamy czas na JS

var max_width = 300; // definiujemy maksymalną szerokość obrazka

// tworzymy nową funkcje
function resize_image(img) {

     // jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
     if(img.width > max_width) {

      // obliczamy proporcje szerokość do wysokość
      factor = img.width / img.height;

      // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
      height = Math.floor(max_width / factor);

      // nadajemy obrazkowi nowe wymiary
      img.width = max_width;
      img.height = height;
      }

}

Jak widać na przykładzie wszystko działa jak należy

Jednak niektórym to nie wystarcza, chcieliby dodać jakieś efekty wyglądu zeskalowanego zdjęcia oraz stosowny komunikat. Użyjemy do tego funkcji createElement czyli jak sama nazwa wskazuje stworzymy nowy element html.

var max_width = 300; // definiujemy maksymalną szerokość obrazka

// definujemy nową funkcje
function resize_image(img) {

// jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
if(img.width > max_width) {
      // obliczamy proporcje szerokość do wysokość
      factor = img.width / img.height;

      // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
      height = Math.floor(max_width / factor);
       
      // i tutaj zaczyna się zabawa ;) tworzymy element div
      var newdiv = document.createElement('div');

      // nadajemy mu klasę css .resize_image
      newdiv.className = 'resize_image';

      // za pomocą metody innerHTML zmieniamy zawartość diva: link do powiększonego obrazka, oraz komunikat "Kliknij na obrazek aby go powiększyć"
      newdiv.innerHTML = '<a href="' + img.src +'" onclick="this.target=\'_blank\'"><img src="'
+ img.src +'" height="' + height +'" width="' + max_width +'" alt="" title="Kliknij aby
powiększyć."></a><br /><p style="width:' + max_width +';">Kliknij na obrazek aby go
powiększyć.</p>';

      // wstawiamy diva przed ten duży obrazek
      img.parentNode.insertBefore(newdiv, img);

      // i usuwamy go (obrazek)
      img.parentNode.removeChild(img);
      }

}

Jeszcze dam wam styl css:

.resize_image {
display: inline;
}

 .resize_image img {
border: 1px solid #9aa4b1;
padding: 5px;
display: inline;
margin: 0;
}

       
.resize_image p {
border: 1px solid #9aa4b1;
border-top: none;
padding: 5px;
color: #464c55;
margin: 0;
font-size: 14px;
padding: 5px;
height: 17px;
text-align: center;
}

Jak widać działa.
To by było na tyle

_____________________________________

Autor poradnika: Fafu http://rafal-brzezinski.pl/