Forum PHP.pl > [PHP] PhpThumb, stała szerokość obrazka w HTML a zmienna wysokosc

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP] PhpThumb, stała szerokość obrazka w HTML a zmienna wysokosc

rasten

2.06.2010, 15:01:04

Witam,

chciałbym, żeby obrazek wyświetlany był ze stała szerokością natomiast jego wysokość była zmienna, ale z pewną maksymalną możliwą wartością. Korzystam z phpthumb'a i narazie mam coś takiego:

[PHP] pobierz, plaintext 
<img id="zdjecie" src="libs/phpthumb/phpThumb.php?src=../../../zdjecia/zdjecie1.jpg&w=200&h=jakas_max_wartosc" width="200" border="0" alt="" />
[PHP] pobierz, plaintext

Niestety to nie działa, ponieważ jeśli mam węższy obrazek niż 200 i jednocześnie bardzo wysoki to parametr width="200" i tak sprawi, że przeglądarka sama sobie go przeskaluje w wyniku czego otrzymam wysokość większą niż chce. Jak to można rozwiązać? Wiem, że mogłbym uzyć, np. funkcji getimagesize czy jakoś tak, ale problem w tym, że wartość src obrazka jest ustawiana w js|jquery.

zordon

2.06.2010, 15:26:14

bardzo prosto możesz sobie proporcjonalnie WYŚWIETLAĆ obrazek w html modyfikując go w js:

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
function podmien(id){
	var h = id.height;
	var w = id.width;
	id.width = 200;
	id.height = 200*h/w;
}
</script>
 
</head>
 
<body >
 
<img src="wisla.jpg" onload="podmien(this);"/>
 
</body>
 
</html>
[HTML] pobierz, plaintext

Oczywiście jeśli obrazek jest duży może być to problem więc najlepiej resizować sobie go (podobnym algorytmem) w php za pomocą GD

rasten

2.06.2010, 16:35:14

niestety nie działa, po wywolaniu

[PHP] pobierz, plaintext 
alert(id.height);
[PHP] pobierz, plaintext

wyskakuje jakas dziwna wysokosc nie majaca nic wspolnego z obrazkiem.
Jak wywale ostania linijkę ze skryptu js

[PHP] pobierz, plaintext 
id.height = 200*(h/w);
[PHP] pobierz, plaintext

to alert pokazuje dobrą wysokosc obrazka. Oczywiście alert umieszczam przed ustawieniem id.height. O co chodzi...?

zordon

2.06.2010, 17:09:38

w tagu <img src="wisla.jpg" onload="podmien(this);"/> nie może być parametru height i width podanego, wtedy alert(id.height) powinno pokazać Ci rzeczywistą, fizyczną wysokość obrazka źródłowego (czyli to, co pokaże Ci windows jak klikniesz prawym przyciskiem myszy i wybierzesz właściwości na pliku obrazka, który chcesz załączyć.
Następnie ustawiasz na sztywno szerokość na 200, a linijka id.height = 200*(h/w); oblicza PROPORCJONALNĄ wysokość, jaka ma zostać nadana obrazkowi. Jeśli dałbyś obrazkowi o wymiarach 400x100 na sztywno wymiary 200x200 (powiedzmy) to zostałby on rozciągnięty nieproporcjonalnie. Jeśli zaś użyjesz mojego skryptu, Przeglądarka wyświetli Ci proporcjonalny, mniejszy obrazek o rozmiarach 200x50.

U mnie skrypt działa, jeśli u Ciebie są problemy wklej cały html

Dodam tylko, że skrypt w żaden sposób nie modyfikuje PLIKU obrazka, zmienia tylko sposób jego wyświetlania w przeglądarce.

PS. jeszcze raz przeczytałem Twojego drugiego posta i podejrzewam, że alerta dałeś po wykonaniu mojego skryptu? Wtedy ta "dziwna" wielkosc to właśnie wartość wyliczona z proporcji. Wyświetl sobie obrazek w przeglądarce - podejrzewam, że cały czas działa!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.