Witam, czy istnieje sposób na dynamiczną zmianę rozmiaru obrazka po wpisaniu wymiarów w pola text? Chciałbym zaprezentować ramy obrazów i chodzi mi o to, żeby ktoś mógł sobie wizualnie sprawdzić, jak taka rama wygląda (oczywiście w przybliżeniu). Czyli mam wycięte ramki, ktoś wpisuje wymiary w pola a obrazek się skaluje. Sama zmiana rozmiaru to może nie jest jakiś problem, natomiast nie wiem jak to zrobić, kiedy mam ramkę np. 200x100 a ktoś chce zobaczyć 100x200. Może ktoś widział podobne rozwiązanie?

Chodzi o skalowanie czy jedynie o symulację proporcji?

http://jsfiddle.net/cqbR8/

No chyba jednak nie. Jaki sens ma takie rozciąganie obrazka?

SmogAnalog - właśnie wydaje mi się, że sama symulacja proporcji (którą pokazał Gorden - dzięki bardzo) to jeszcze nie całość, o którą mi chodziło. Chodzi jeszcze o to, żeby taki obrazek obłożyć ramką mojego obrazu (ten mój obraz png). Obraz jedynie ze zmienionymi proporcjami powoduje, że kiedy zmieniamy z orientacji poziomej na pionową, ściany ramki się nieproporcjonalnie zmieniają, a to nie wygląda najlepiej. Można to odpowiednio przeskalować a przy tym zachować proporcje ścian? Nie wiem, czy samą js to się da zrobić, może trzeba zaprzęgnąć imagemagick czy coś w tym stylu? Albo podzielić ramkę na dwie części i odpowiednio łączyć za pomocą php w jeden obraz?

Prawdę mówiąc dalej nie rozumiem dokładnie co chcesz zrobić, a pytam, bo od tego zależy sposób implementacji.

Czyli masz jakiś tam obrazek X, który oryginalnie ma wymiary 500x500. Ktoś wpisuje 200x100 i co się dzieje?

1. Obrazek zostaje rozciągnięty (w co wątpię)
2. Zostaje wycięty fragment (pozycja do ustalenia) o wymiarach 200x100 (też wątpię)
3. Zostaje wycięty fragment ale proporcjonalnie do całości, czyli otrzymamy tak jakby 500x250 przeskalowane do 200x100.

Czy któryś z tych punktów pokrywa się z Twoimi założeniami?

Zdecydowanie pkt 3. Jeśli do tego można będzie zrobić też odwrotnie, czyli z obrazka 500x500 zrobić i 500x250, i 250x500, to będzie dokładnie to, o co mi chodzi. Wynikowy przeskalować do jakiejś szerokości DIVa, w którym to się będzie znajdować, ale to już najmniejszy problem, bo to można zrobić CSSem.

może coś pomoże http://rafal.brzezinski.me/skalowanie_obrazkow

Ja bym zrobił tak:

1. Dodał kontener z position: relative i overflow: hidden, zawierający i ramkę, i obrazek
2. Dodał obraz właściwy do tego kontenera z position: absolute
3. Dodał obrazek ramki do tego kontenera z position: absolute

W ten sposób masz ramkę na obrazie, pozostaje kwestia skalowania.

Czy obraz ma być ucinany zawsze ze środka?

Skalowanie ramki póki co pomijam, ale to też jest do obgadania, żeby była zawsze równomierna, tzn. miała taką samą grubość na wszystkich ściankach.

Obraz skalujesz według większej proporcji, czyli:

[JAVASCRIPT] pobierz, plaintext 
var proporcja = Math.max(wpisanaSzerokosc / oryginalnaSzerokosc, wpisanaWysokosc / oryginalnaWysokosc),
    nowaSzerokosc = oryginalnaSzerokosc * proporcja,
    nowaWysokosc = oryginalnaWysokosc * proporcja;
[JAVASCRIPT] pobierz, plaintext 

Nadajesz obrazkowi takie właśnie wymiary i w tym momencie masz największy mieszczący się fragment obrazu w ramce, ale zaczynając od lewego górnego rogu. Żeby wyśrodkować, musisz trochę matematyki znowu włączyć i przesunąć obraz właściwościami CSS left i top. Uwzględnij przy tym grubość ramki. Będzie trochę zabawy, ale efekt wyjdzie fajny