img

zamieszczenie obrazka na stronie z dostosowaniem jego wielkości do wielkości elementu:

img{
 max-width:100%;
 height:auto;
}

Parametry uwzględniane przy zamieszczaniu obrazka:

  • rozdzielczość ekranu
  • przepustowość łącza
  • szerokość okna przeglądarki

Orientacyjne wymiary:

  • 480px – smartfony o standardowej rozdzielczości
  • 1024px – tablety, komputery stacjonarne o standardowej rozdzielczości, iphone z ekranem Retina
  • 1600px – iPad z ekranem Retina, komputery stacjonarne z ekranem o wysokiej rozdzielczości

 

Znacznik picture pozwala na podanie wielu źródeł zdjęcia i wybranie odpowiedniego dzięki zapytaniu o media.

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="myimage.jpg" alt="">
</picture>

 

Plugin jQuery Foresight – sprawdza rozdzielczość urządzenia i szybkość łącza użytkownika przed wysłaniem żądania do serwera.

Korzysta z hybrydowej implementacji nowej funkcji css – image-set()

 

Plugin JavaScript – Picturefill – pozwala na podmianę wersji obrazka w zależności od wielkości okna i rozdzielczości.

 

Nastaw responsywnych obrazków

biblioteka css Focal Point – pozwala na definicję obszaru zdjęcia które ma być widoczne na mniejszych ekranach.

Dzieli obrazek w siatce po 12 kolumn i wierszy. Wyznaczając od środka zdjęcia przesunięcie punktu centralnego określamy przycięcie zdjęcia.

 

Responsywne obrazy tła

Plugin Anystretch – plugin biblioteki jQuery, wariant (fork) pluginu Backstretch – pozwala na dynamiczne rozciąganie tła w zależności od wielkości okna przeglądarki.

Plugin biblioteki jQuery Backstretch – dodanie do strony, elementu strony dynamicznie zmieniającego się tła.

#responsive