Jak dodać responsywne obrazy tła do strony internetowej?

Oto jak dodać responsywne obrazy projektowe za pomocą CSS

Hannah Mentz / Getty Images

Spójrz na popularne obecnie witryny internetowe, a jednym z rozwiązań projektowych, które na pewno zobaczysz, są duże, obejmujące cały ekran obrazy tła. Jedno z wyzwań związanych z dodawaniem tych obrazów wynika z najlepszych praktyk, zgodnie z którymi witryny muszą reagować na różne rozmiary ekranu i urządzenia — podejście znane jako responsywne projektowanie stron internetowych .

Jeden obraz na wiele ekranów

Ponieważ układ witryny zmienia się i skaluje wraz z różnymi rozmiarami ekranu, obrazy tła również muszą odpowiednio skalować swój rozmiar. W rzeczywistości te „płynne obrazy” są jednym z kluczowych elementów responsywnych witryn internetowych (wraz z płynną siatką i zapytaniami o media). Te trzy elementy były podstawą responsywnego projektowania stron internetowych od samego początku, ale chociaż dodanie responsywnych obrazów wbudowanych do witryny zawsze było dość łatwe (obrazy wbudowane to grafika zakodowana jako część znaczników HTML), wykonując to samo z obrazami tła (które są stylizowane na stronę za pomocą właściwości tła CSS) od dawna stanowi poważne wyzwanie dla wielu projektantów stron internetowych i programistów front-end. Na szczęście umożliwiło to dodanie właściwości „background-size” w CSS.

W osobnym artykule omówiliśmy, jak korzystać z Właściwość CSS3 rozmiar tła aby rozciągnąć obrazy, aby zmieściły się w oknie, ale istnieje jeszcze lepszy, bardziej użyteczny sposób wdrożenia tej właściwości. W tym celu użyjemy następującej kombinacji właściwości i wartości:

|_+_|

Właściwość słowa kluczowego cover mówi przeglądarce, aby skalowała obraz tak, aby pasował do okna, niezależnie od tego, jak duże lub małe będzie to okno. Obraz jest skalowany tak, aby obejmował cały ekran, ale oryginalne proporcje i proporcje pozostają nienaruszone, co zapobiega zniekształceniu samego obrazu. Obraz jest umieszczany w oknie tak dużym, jak to możliwe, aby zakryć całą powierzchnię okna. Oznacza to, że nie będzie żadnych pustych miejsc na stronie ani żadnych zniekształceń obrazu, ale oznacza to również, że część obrazu może zostać przycięta w zależności od proporcji ekranu i danego obrazu. Na przykład krawędzie obrazu (góra, dół, lewa lub prawa) mogą zostać obcięte na obrazach, w zależności od wartości użytych we właściwości background-position. Jeśli ustawisz tło w lewym górnym rogu, nadmiar obrazu zejdzie z dolnej i prawej strony. Jeśli wycentrujesz obraz tła, nadmiar zejdzie ze wszystkich stron, ale ponieważ nadmiar jest rozłożony, wpływ na którąkolwiek stronę będzie mniejszy.

Jak używać 'background-size: cover;'

Tworząc obraz tła, dobrym pomysłem jest utworzenie obrazu, który jest dość duży. Chociaż przeglądarki mogą zmniejszać obraz bez zauważalnego wpływu na jakość wizualną, gdy przeglądarka skaluje obraz do rozmiaru większego niż jego oryginalne wymiary, jakość wizualna ulegnie pogorszeniu, stanie się rozmyta i rozpikselowana. Wadą tego jest to, że Twoja strona traci wydajność, gdy dostarczasz gigantyczne obrazy na wszystkie ekrany. Kiedy to zrobisz, upewnij się, że prawidłowo przygotuj te obrazy do szybkości pobierania i dostarczania przez Internet . W końcu musisz znaleźć złoty środek między wystarczająco dużym rozmiarem i jakością obrazu a rozsądnym rozmiarem pliku dla prędkości pobierania.

Jednym z typowych sposobów używania skalowanych obrazów tła jest sytuacja, gdy chcesz, aby ten obraz zajmował całe tło strony, niezależnie od tego, czy strona jest szeroka i wyświetlana na komputerze stacjonarnym, czy znacznie mniejsza i jest wysyłana do urządzenia przenośnego, mobilnego urządzenia.

Prześlij swój obraz do swojego usługodawcy hostingowego i dodaj go do CSS jako obraz tła:

|_+_|

Najpierw dodaj CSS z prefiksem przeglądarki:

|_+_|

Następnie dodaj właściwość CSS:

|_+_|

Używanie różnych obrazów, które pasują do różnych urządzeń

Chociaż responsywny projekt dla komputerów stacjonarnych lub laptopów jest ważny, różnorodność urządzeń, które mogą uzyskać dostęp do sieci, znacznie wzrosła, a co za tym idzie, większa różnorodność rozmiarów ekranu.

Jak wcześniej wspomniano, ładowanie bardzo dużego responsywnego obrazu tła na przykład na smartfonie nie jest wydajnym projektem ani nie uwzględnia przepustowości.

Dowiedz się, jak możesz używać zapytania medialne aby wyświetlać obrazy, które będą odpowiednie dla urządzeń, na których będą wyświetlane, i jeszcze bardziej poprawić kompatybilność Twojej witryny z urządzeniami mobilnymi.