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/