Jak zrobić kontener na banner?

Jak zrobić kontener na banner?

Z artykułu dowiesz się jak utworzyć kontener na zdjęcie, które będzie się skalowało wraz z szerokością przeglądarki do popularnego wymiaru 16:9.

Jeżeli jesteś na bieżąco z publikowanymi artykułami, to wiesz już  jak zrobić hamburgera. Dzisiaj zrobimy następny kroczek – wykorzystamy przygotowane wcześniej menu i dodamy zdjęcie, które automatycznie dostosowuje się do szerokości ekranu i zachowuje narzucone proporcje.

Zdjęcie z zachowanymi proporcjami

Poniższy przykład to esencja dzisiejszego wpisu. Podczas zmniejszania okna przeglądarki, możemy zauważyć, że zdjęcie zachowa swoje proporcje a cały kontener będzie w wymiarach 16:9.

See the Pen responsive website by Tomasz Wikło (@studioleopard) on CodePen.19725

Zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.

Przygotowywanie struktury HTML

Lekko zmodyfikowałem kod HTML z artykułu jak zrobić hamburgera dodając część związaną ze zdjęciem.

See the Pen responsive website by Tomasz Wikło (@studioleopard) on CodePen.19725

Nie ma tutaj nic skomplikowanego, dwa elementy div (banner-container i banners) do dalszego pozycjonowania w CSS oraz zdjęcie. Zwróć jednak uwagę, że nie używałem znacznika <img> lecz inline CSS. Związane jest to z tym, że w dalszej części chciałem wykorzystać właściwość background-size: cover;, która dotyczy właściwości background a nie znacznika <img>.

Skoro jesteśmy już przy background-size: cover; to zasada działania jest bardzo prosta – obraz jest tak skalowany, aby wypełniał całą zawartość kontereru, w którym się znajduje. Od razu chce zaznaczyć, że jeżeli mamy kontener, którego wysokość to np. 300px a zdjęcie ma 900px , to nasz kontener nie jest wystarczająco wysoki aby zmieścić całe zdjęcie i zostanie ono przycięte – jednak proporcje zostaną zachowane.

To co jeszcze trzeba tutaj zaznaczyć, to fakt otoczenia całego kodu z menu i bannerem w div z klasą container. Będzie ona naszym kontekstem pozycjonującym dla bannera.

Klasy responsywnego zdjęcia pod lupą

Poniżej zamieściłem skrócony kod CSS, który jest naszym dzisiejszym tematem przewodnim wpisu (pełny oczywiście możesz zobaczyć na samym wstępie wpisu).

See the Pen responsive background-image css by Tomasz Wikło (@studioleopard) on CodePen.19725


.banner-container
Uwielbiam lekką przeźroczystość, dlatego chciałem aby zdjęcie znajdywało się pod przeźroczystym menu. Aby to uzyskać musiałem przesunąć element względem swojego rodzica – czyli diva z klasą .container, który jest pozycjonowany relatywnie.

Właściwościami top: 0; i left: 0; ustawiłem zdjęcie w lewy górny narożnik. Całemu kontenerowi nadałem wysokość i szerokość 100%.

Jak zauważyłeś w kodzie HTML mój banner jest za menu – czyli mówiąc inaczej, biorąc pod uwagę obecną pozycję bannera całkowicie zasłania menu. Dlatego zastosowałem tutaj z-index: -999; wymuszając, aby zdjęcie wyświetliło się pod menu. Elementy z wyższą wartością z-index wyświetlają się przed elementami z niższą wartością. Domyślną wartością jest auto, czyli z-index byłby taki sam jak rodzica co nie rozwiązałoby nam problemu, dlatego wpisałem wartość -999 aby mieć pewność, że tło wyświetli się poniżej menu. Oczywiście mogłem to rozwiązać inaczej – przenieść cały div z klasą .banner-container nad diva z klasą .menu-container. W tym przypadku, uzyskalibyśmy to samo. Jednak z z-index jest sprawniej i szybciej.

.banner-container .banners
Przyznam się, że klasę .banners zrobiłem trochę nadmiarowo. W przyszłości chcę zamienić nasz banner w slajder. Wtedy w divie .banners będą znajdywały się wszystkie zdjęcia z klasą .single.

.banner-container .single
Upewniamy się, że zdjęcie będzie w lewym górnym narożniku. Pamiętajmy, że to jest div, więc trzeba mu jeszcze nadać odpowiednią wysokość i szerokość – w przeciwnym wypadku nasze zdjęcie nie będzie widoczne. Zgodnie z tym co wcześniej napisałem, nasz banner jest tłem, a więc stosujemy background-size: cover;

Jak chodzi o responsywne zdjęcie to już prawie wszystko. Prawie, bo jedna rzecz jest kluczowa. Nasz banner .banner-container jest pozycjonowany absolutnie. Jednak w jaki oblicza swoją wysokość przy zmniejszaniu szerokości przeglądarki?

Zależność pomiędzy szerokością a marginesem w procentach

Nasze zdjęcie z klasą .single ma ustawiony height: 100%; – czyli 100% wysokości okna przeglądarki. Jednak jak obliczana jest ta wysokość, na podstawie czego? I tutaj musimy wrócić się do diva z klasą .container.

Jeżeli ustawimy elementowi padding-top lub padding-bottom na wartość procentową, to padding obliczany jest na podstawie szerokości tego elementu. Czyli przykładowo, jeżeli kontener ma 1000px szerokości to po ustawieniu padding-bottom: 56.25%; wysokość elementu automatycznie ustawi się na 562,5px.

I właśnie taką wysokość otrzymywałyby wszystkie klasy, które zastosowałem do naszego responsywnego obrazka.

Innymi popularnymi wymiarami obrazów są 4:3, 3:2 czy 8:5. Jeżeli chcesz zamiast 16:9 ustawić inny, wystarczy, że zmienisz padding-bottom na odpowiednip: 75%, 66.66% i 62.5%.

Jak to jest obliczane? Aby otrzymać wymiary kontenera np. 4:3 wystarczy 3 podzielić przez 4 i przemnożyć przez 100. W taki sposób otrzymamy dokładny wymiar w procentach, który wystarczy wprowadzić do diva z klasą .header-container.

See the Pen responsive website by Tomasz Wikło (@studioleopard) on CodePen.19725

Zmniejsz rozmiar okna, aby zobaczyć efekt końcowy.

A Tobie jak podoba się efekt, zastosowałbyś go na swojej stronie? Zapraszam do podzielenia się spostrzeżeniami.

 

 

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.