Witam,

wiem, że można to zrobić kilkoma sposobami, nawet niektórymi ładnie to wygląda, ale chcę zapytać jak najlepiej to zrobić:

- chcę mieć 3 divy na stronie w 1 linii
- wszystkie 3 muszą zajmować łącznie całą szerokość strony (każdy tej samej szerokości)
- każdy będzie miał w tle background-image (tych samych wymiarów), a w treści jakiś tekst
- cały box musi być poprawny składniowo html5 css3
- blok musi być responsywny tj. obrazki w zależności od wymiarów mają się zmniejszać (zawartość też)

dzięki

PS - tak znalazłem różne rozwiązania, ale albo są nie-responsywne, albo dziwne składniowo

http://jsfiddle.net/9k8b0t5e/

Można też w ten sposób:
http://jsfiddle.net/wuf7x3y2/

przy stałej wysokości - ucina obrazki - już o tym wspominałem.

ponadto chciałbym by nie było przerw między obrazkami (żadnych marginów/borderów ani innych odstępów)


czy jedyną opcją jest umieszczenie imga w kodzie html, zamiast jako bg w css?

http://jsfiddle.net/9k8b0t5e/1/

obrazki zachowują się odwrotnie proporcjonalnie do skalowania strony - również nie o to mi chodziło

Napisałeś, że bloki mają być responsywne, zawartość również (tu obrazki).
Obrazki skalują się do szerokości bloków zachowując proporcje.
Jak mają się skalować?

EDIT:
Może o to Ci chodziło: http://jsfiddle.net/9k8b0t5e/2/

niestety - w moim template ustawinie height: 100% nic nie daje

nie wiem czy to kwestia tego że te obrazki są w navie a w divach z tłem umieszczam tekst (dopasowuje wysokość diva wraz z obrazkiem do tekstu)



nie chcę podawać stałej wysokości diva - takiej by zmieścił się obrazek, bo wtedy przy zmienianiu rozdzielczości nie będzie się skalował.

Rodzic ma mieć 100% wysokości, body i html również.

już lepiej, dziękuję

teraz tylko powiedz czy pozycjonować divy margin-left i dać parentowi display:inline? to będą 3 różne divy.


2 - niestety ale obrazki zachowują stałe rozmiary. da się żeby proporcjonalnie się zmniejszały gdy zmieniam zoom strony?

Bez użycia js można skalować, ale bez zachowania proporcji, chyba że użyjesz <img> jako tła

http://jsfiddle.net/fgz27yzu/1/

http://jsfiddle.net/fu82htoh/

bardziej RWD sie nie da. i nie kombinuj z background bo przekombinujesz i nie bedzie to mniej zgodne z W3C niz to co Ci dalem.

tzm,
nie może być max-width i max-height 100%, bo przy małych rozmiarach własnych, zdjęcia nie dopasują się do bloków.

Bardzo dziękuję wszystkim - moja pomyłka.
Błąd logiczny:
skoro 1/3 strony na szerokość zawsze zajmuje 1/3 ekranu (zmaksymalizowana) to można albo zmniejszać wysokość obrazka nie zachowując proporcji albo zmniejszać obrazek i zmniejszać jego szerokość również (nie ma wtedy 1/3 ekranu)

dzięki za wszelką pomoc - załapałem dopiero teraz (ostatnio się nie wysypiam i gubię oczywistości )
dzięki raz jeszcze

poczytaj w internetach jak sie skaluje img zeby zawsze byly proporcjonalne albo powiedz instagramowi ze robia cos nie zgodnie ze sztuka. od nich sie nauczylem tego skalowania.

Dzięki, poczytam.
Ale wydaje mi się, że nie zrozumiałeś mnie.
Jeśli blok będzie mieć 200px na 200px, to obrazek o rozmiarze 20px na 20px nie dopasuje się do niego.