Velikost kontejneru podle pozadí

Máte nějaký kontejner (DIV), jehož nejdůležitějším obsahem je obrázek na pozadí (ikona, logo, apod.) a chcete, aby se velikost DIVu a velikost pozadí responzivně přizpůsobila na šířku stránky (nebo její část)?

Inspirováno http://www.sitepoint.com/video-scalable-backgrounds-css/.

Příprava kontejneru

První krok je zvolit šířku kontejneru. Ta může být zjištěna libovolně – buď necháte DIV, aby se sám zvětšil na dostupnou šířku, nebo mu šířku zadáte v CSS nebo použijete Flexbox pro vytvoření layoutu:

/* Automaticky přizpůsobený */
div.logo {
 /* width: auto; */ /* auto je default */
}

/* Přes celou šířku */
div.logo {
    width: 100%;
    /* pro margin: */
    margin: 0.1em 1em;
    width: calc(100% - 2em);
}

/* Flexbox (logo zabere zhruba 1/3 šířky) */
.topbar { display: flexbox; }
.logo { flex: 1 1 30%; }

Když máme kontejner, stačí mu nastavit obrázek do pozadí. Aby se pozadí vždy přizpůsobilo šířce, musíme mu nastavit velikost:

/* Pozadí podle šířky kontejneru */
div.logo {
    background: url(/logo.png) no-repeat
           center center transparent;
    background-size: 100% auto;
}

Pomocí velikosti 100% auto říkáme prohlížeči, že obrázek má vždy zabrat 100% šířky svého kontejneru a výška se má automaticky spočítat tak, aby se zachoval poměr stran obrázku.

Více o velikost pozadí v článku Nastavení velikosti pozadí.

Automatická výška kontejneru

Nyní ale narazíte na problém, že kontejner se nepřizpůsobí výškou výšce pozadí, která se počítá automaticky. K jeho vyřešení můžete použít dva fakty:

  1. Známe velikost obrázku, který se vykresluje na pozadí.
  2. Když zadáte rozměr prvku v procentech, prohlížeč to pochopí jako procenta šířky téhož prvku.

Pokud tedy máte např. logo o velikosti 100x40px, poměr výšky  obrázku je 40% jeho šířky.

Má to ale jeden háček – vlastnost height totiž procenta ignoruje, takže height: 40% je stejné jako neuvedení vlastnosti a ve většině případů bude odpovídat height: 0. Vlastnosti, které procenta ale v úvahu berou jsou padding a margin, takže stačí použít padding-bottom a prvek se zvětší díky tomu, že bude mít sice nulovou výšku, ale padding o požadované velikosti:

div.logo {
    /* ... nastavení pozadí */
    padding-bottom: 40%; /* poměr pozadí */
}

Nezapomeňte na RWD

Nezapomeňte, že pokud máte v responzivním CSS různé obrázky pro různé šířky, musíte výšku kontejneru spočítat a nastavit pro každý break-point:

div.logo {
    background: url(/logo.png) no-repeat
           center center trasparent;
    background-size: 100% auto;
    height: 40%;
}
@media (min-width: 480px) {
    div.logo {
        background-image: url(/logo-big.png);
        height: 20%; /*velké logo je širší*/
   }
}

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *