Wpis z mikrobloga

Tak szukam sposobu na obrazki w RWD i nie wiem jak to do końca zrobić. Mam kilka opcji:

1. wykorzystać background-image, ale wtedy nie będzie to się zachowywało tak jak potrzeba.

2. użyć czegoś w stylu adaptive-images (wykorzystuje PHP do generowania obrazków)

3. korzystać z js (po załadowaniu) + w dodatkowych atrybutach pozostałe wersje obrazków (przeskalowane odpowiednio)

Chyba że ktoś ma jakiś inny pomysł albo coś mógłby polecić :>

#webdev #responsive #rwd
  • 13
@xcccx: 1. zawsze ograniczaj JS do minimum. 2. może po prostu img {max-width: 100%;} Chyba, że nie skumałem o co Ci chodzi?

No i timthumb Twoim przyjacielem
@npsr: nie chce ładować przykładowo 600 kB obrazków dla ekranu o szerokości 300px gdzie wystarczą grafiki o wadze 100 kB i chce jakoś to rozdzielić
@xcccx: hmmm, dobry temat. No to background-images i media queres.

Na przykładzie less:

.image-full {

background: url('costam.jpg);

}

.image-thumb {

background: url(costam-thumb.jpg}

}

@media (max-width: 480px) {

div {,image-thumb;}

}
@npsr: tak też miałem, jednakże potrzebuję aby div po otrzymaniu danej klasy rozciągał się na wysokość zawartego w nim obrazka, a więc w przypadku tła nie miałem pomysłu na obejście tego..
@npsr: tylko później robi się problem jak mi ktoś przerzuci np. telefon na bok i obrazki się znowu skalują, dlatego z tym jest ciężko i teraz oprę to na img i różnych źródłach po prostu. Chyba że jest jakiś lepszy sposób.