Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Bootstrap a rozmair obrazkow
Forum PHP.pl > Forum > Przedszkole
Stiffler
Witam,
Postanowilem zaimplementowac nowa technologie do mojego projektu. Ale mam problem natury logistycznej. Mianowicie strona posiada duzo IMG. Logo/slider/baner. Ja pracuje na laptopie z rozdzielczoscia 1366x768 a kolega szablon robil na 1920x1080. No i jak to pogodzic z boostrapem? Czy on ma mi wyslac dwa rozmiary obrazkow? Czy moze jeden i go skalowac? Jak tak to jak? W tym bootstrapie czytalem o skalowaniu column, ale co ze skalowaniem obrazkow?
by_ikar
Z obrazkami jest to samo. Doczytaj dokumentacje jest tam chociażby coś takiego jak img-responsive ale możesz to też zrobić inaczej.
Stiffler
Robie ale jestem troche skonfuzjowany. Gdyz napisze to co wiem na ta chwile.
Jest tam grid system, czyli musimy logo miec w jednym z gridow. Gridow jest 12 na szerokosc ekranu. czyli teoretycznie logo moze miec X/12 szerokosci strony. Co jak logo jest w nie standardowym rozmiarze dla boostrapa? Kiedy ma ono 5.3/12 szerokosci strony?
Crozin
1. Nie wszystko musi być wrzucone w Bootstrapowego grida.
2. Wystarczy, że "komórka" będzie odpowiednio duża by pomieścić obrazek, wtedy możesz go tam wrzucić z max-width ustawionym właśnie na 5.3/12 szerokości strony.
Stiffler
Komorka tzn 1 grid czy 12 ?

Mozna jakis realny przyklad. Przyjmijmy ze przy 1920 logo ma 100x100 to przy 1366 chce zeby sie zeskalowalo wprost proporcjonalnie do tej rozdzielczosci.
Moze jakas podpowiedz? Dostalem layout od grafika i musze go przepisac do css. Bez resposive desgining i bootstrapa to dla mnie banal. Ale to moj pierwszy raz z RD
Crozin
Możesz podać przykład (makietę) jak strona powinna wyglądać przy 1920 i 1366 pikselach szerokości?
Stiffler
Problem jest taki, ze powinna wygladac tak samo.

Tzn obrazki musza sie przeskalowac. W tym momencie dostalem obrazki w rozdzielczosci dla 1920x1080 wiec u mnie na komputerze pojawia sie paski do przewijania.
Dam jpg jak powininna wygladac:

http://www.konkrete.vot.pl/1920.jpg

Ten duzy obrazek w tle to slider.
by_ikar
To co ty tam masz, to jest tło, więc proponuje ci użyć background-size: cover, i tutaj bootstrap ma nic do tego. Nie wiem czemu ludziom się wydaje że podpięcie samego bootstrap nagle przerabia ich stronę w responsywną..
Stiffler
Co z logiem?
Crozin
1. To białe logo przecież bez żadnych zmian zmieści się i na wyświetlaczu z 300 pikselami.
2. Jeżeli chcesz by na mniejszych rozd. było ono mniejsze to skorzystaj z @media i ustaw mu odpowiednie max-width.
Stiffler
hmm.. no tak. To napewno za dziala, juz sprawdzalem.
Mozecie cos powiedziec o dokladnym odwzorowaniu szablonu przy wspolpracy z boostrapem?
Bez niego czasami trzeba sie na meczyc zeby odwzorowac loyout w 100%.
Czy boostrap jest inwestycja czasu ktora owocuje pozniej RWD, czy moze przy pomocy jego da sie latwiej lub tak samo prosto budowac layouty od grafikow?
tzm
Tak, bootstrap jest RWD.
Tylko zanim coś napiszesz w nim responsywnego to minie kilka chwil i zdupionych projektów. Taka prawda.
zegarek84
Cytat(Stiffler @ 29.07.2014, 21:04:49 ) *
Co z logiem?

jeśli chcesz by się skalowało też logo to w ramach nauki na inne projekty i szersze spojrzenie pokombinuj sobie ze sposobem na tło nr 2 lub jeśli wolisz inny tok myślenia i jQuery to 3... w przeszłości dla starych nie wart wspierania IE position fixed uzyskiwało się przez odpowiednią kombinację pozycjonowania absolutnego....
http://css-tricks.com/perfect-full-page-background-image/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.