Mam stały rozmiar<div> z niektórymi złożonymi treściami (w tym tekstem i obrazami tła). To<div> ma swój rozmiar zakodowany na stałe w pikselach (a jego zawartość zależy od tego rozmiaru, a pozycje treści są również zapisane w pikselach).

Oto bardzo uproszczony przykład:http://jsfiddle.net/dg3kj/.

Muszę skalować ten div i zawartą w nim zawartość, zachowując proporcje, aby pasował do okna.

Rozwiązanie, które nie wymagałoby ode mnie ręcznej zmiany<div> zawartość jest lepsza (jest generowana dynamicznie i jest zbiorem bardzo niechlujnego kodu, którego chciałbym uniknąć). Rozwiązania JavaScript (jQuery) są w porządku (także te, które zmieniają generowaną treść - tak długo, jak jest to wykonywane post-factum samego generowania).

Próbowałem się bawićtransform: scale(), ale nie przyniosło to zadowalających rezultatów. Spójrz tutaj:http://jsfiddle.net/sJkLn/1/. (Spodziewam się, że czerwone tło nie będzie widoczne - tzn. Najbardziej zewnętrzne<div> rozmiar nie powinien być rozciągany przezoryginalny wymiary pomniejszone<div>.)

Jakieś wskazówki?