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;
    padding-bottom: 40%;
}
@media (min-width: 480px) {
    div.logo {
        background-image: url(/logo-big.png);
        padding-bottom: 20%; /*velké logo je širší*/
   }
}

 

Nefunguje pro SPAN?

Nefunguje vám zde popsaný postup pro span nebo jiný inlinový prvek?

Pravděpodobně jste zapomněli na fakt, že padding se pro inline prvky ignoruje.

Pokud chcete takovému prvku nastavit padding, musíte ho změnit na display:block nebo display:inline-block podle toho, jak ho chcete zobrazit.