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?
Ramka do obrazka
Napisano 27 października 2013 - 00:11
Zakładam, że masz te divy wewnątrz siebie. W takim razie zrezygnuj z ustalania wielkości, a skup się na marginesach. (margin, padding)
Napisano 27 października 2013 - 12:32
Może pokaż fragment kodu i css. Łatwiej będzie pomóc i wskazać co robisz źle.
Napisano 28 października 2013 - 09:48
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.
webDeveloper
Napisano 28 października 2013 - 10:15
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.
Napisano 28 października 2013 - 10:21
No a dzięki temu obrazek będzie miał zawsze rozmiar ów divów
webDeveloper
Napisano 28 października 2013 - 10:26
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.
Napisano 02 listopada 2013 - 12:40
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.
Napisano 05 listopada 2013 - 10:15
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ć.
webDeveloper
Napisano 05 listopada 2013 - 23:24
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.
Napisano 06 listopada 2013 - 16:58
Z całym szacunkiem, ale na screenie widać że to jest grafika, a nie css
webDeveloper
Napisano 06 listopada 2013 - 23:53
http://emildzwonek.p...hone/index.html bardziej już chyba udowodnić nie mogę
Napisano 07 listopada 2013 - 09:09
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;
webDeveloper
Napisano 07 listopada 2013 - 15:56
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ł?
Napisano 07 listopada 2013 - 16:00
Zamiast obrazka w backgroundzie tego diva, dawaj go jako img.
webDeveloper
Napisano 08 listopada 2013 - 00:28
Ogólny szkielet "telefonu" w poziomie mam zrobiony. Mam 2 problemy:
* jak zrobić, żeby wszelkie odległości w pionie tez ustawiały się proporcjonalnie
* jak zrobić, żeby przyciski i elementy nad ekranem też były responsywne.
Podone tematy
Temat | Forum | Autor | Podsumowanie | Ostatni post | |
---|---|---|---|---|---|
Ramka pokazująca informacje o cookiescookies box, cookies ramka i 1 więcej |
Gotowe rozwiązania | light |
|
Użytkownicy przeglądający ten temat: 0
0 użytkowników, 0 gości, 0 anonimowych