Ramka do obrazka

Stworzyłem sobie dosyć zaawansowaną ramkę do obrazka. Właściwie składającą się z kilku divów i kupy CSSu. Wszystko jest fajnie dopóki mam obrazek o jednej wielkości. Gdy tylko wrzucę tam większy obrazek oczywiście ucina odpowiedni kawałek, gdyż mam na sztywno ustaloną szerokość(i wysokość) diva. Chciałbym jednak, aby wraz z wielkością obrazka(proporcje zawsze są te same) cały mój projekt się także powiększał i zmniejszał jednak zachowując wszystkie proporcje między elementami. Póki co wszelkie długości mam podane w pikselach. Macie pomysł jak rozwiązać ten problem? 

Zakładam, że masz te divy wewnątrz siebie. W takim razie zrezygnuj z ustalania wielkości, a skup się na marginesach. (margin, padding)

Może pokaż fragment kodu i css. Łatwiej będzie pomóc i wskazać co robisz źle.

img walnij w css (tylko dla odpowiedniego, a nie wszystkich) :

img{width:100%}

Jeżeli dobrze zrozumiałem jak to masz, to powinno pomóc, a jak nie, to zrób tak jak kolega wyżej pisze - pokaż nam jakieś demo, lub kawałek kodu.

img walnij w css (tylko dla odpowiedniego, a nie wszystkich) :

img{width:100%}

Jeżeli dobrze zrozumiałem jak to masz, to powinno pomóc, a jak nie, to zrób tak jak kolega wyżej pisze - pokaż nam jakieś demo, lub kawałek kodu.

Zapewne jest div w divie i każdy ma rozmiary na sztywno. 

No a dzięki temu obrazek będzie miał zawsze rozmiar ów divów

No a dzięki temu obrazek będzie miał zawsze rozmiar ów divów

A to właśnie divy mają się dostosowywać do rozmiarów obrazka Czyli tak jak kolega na początku mówił - marginesy.

Idea marginesów jest bardzo dobra. Sprawdza się o ile wygląda to w ten sposób:

<div>
	<div>
		<div>
			<div><img></div>
		</div>
	</div>
</div>

Niestety u mnie to wygląda tak:

<div>
	<div>
		<div class="1">
			<div></div>
		</div>
		<div class="2">
			<div><img></div>
		</div>
		<div class="3"></div>
	</div>
</div>

Oczywiście wszystkie divy(łącznie z tymi, które nie odnoszą się do obrazka) muszą być od siebie zależne. Macie pomysł jak to załatwić?

W zasadzie to wygląda tak, że divy 1, 2 i 3 są pod sobą. Są wyśrodkowane, więc problemu z szerokością nie ma. Problem mam dopiero z ustaleniem ich wysokości. O ile div 2 jest divem z obrazkiem i jego wysokość i szerokość dopasowuje się do obrazka to nie mam pojęcia jak zrobić, żeby divy 1 i 3 też były zależne od obrazka.

Pokaż jeszcze jakiegoś screena jak to ma wyglądać.

Rozumiem że img to jest zawartość ekranu? Jeżeli tak to rozwiązanie jest jeszcze prostsze niż myślisz

+ A sorry  z tego co widzę to te boki mają gradiencik, więc jednak to nie jest takie proste. Można by tutaj skorzystać z CSS3 ale to po 1. nie będzie kompatybilne ze wszystkimi przeglądarkami, po 2. w tym wypadku będzie źle wyglądać.

Jedynym sensownym imo rozwiązaniem to jest skalować obrazki tak żeby do tego pasowały i ewentualnie jakby wychodziły trochę za duże to je przycinać.

Tak, obrazkiem jest zawartość ekranu.

Ten gradient jest wykonany w CSS 3. w zasadzie to są dwa divy z dwoma gradientami(poziomy i pionowy) jeden na drugim. W zasadzie wszystko oprócz obrazka w środku to divy.

Z całym szacunkiem, ale na screenie widać że to jest grafika, a nie css

http://emildzwonek.p...hone/index.html bardziej już chyba udowodnić nie mogę

No to ładnie pojechałeś że Ci się chciał

Teraz już zrozumiałem prawie całkowicie w czym masz problem Rozumiem że jak zmienisz background dla .ekran na obrazek który jest większy to go ucina a chcesz żeby się resizował, ale pytanie: co się ma resizować? obrazek do wymiarów iphona (co wg mnie jest logiczne) czy iphone do obrazka?

Teoretycznie za pomocą css3 jest to możliwe: http://slides.html5r...#css-background

background-size:contain;

Chciałbym, aby cały iPhone dostosowywał się do obrazka zachowując oryginalne proporcje. Miałoby to działać tak, że wklejam obrazek w oryginalnej rozdzielczości(1136x640) to reszta by się dostosowywała jednocześnie zachowując proporcje. Oczwiście to samo miało by się stać przy obrazku o rozdzielczosci np. 568x320(1/2) i przy obrazku 284x160(1/4). Mógłbym też po prostu stworzyć kilka wersji, jednak byłoby miło gdyby to wszystko było responsywne. Masz może jakiś pomysł?

Zamiast obrazka w backgroundzie tego diva, dawaj go jako img.