[CSS]Bootstrap a rozmair obrazkow Opcje

[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.

Ten post edytował Crozin 29.07.2014, 20:11:42

[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]

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/