Max-width pro pozadí

Při tvorbě responsivního designu jde snadno zajistit, aby se obrázky vložené značkou <img> vešly na obrazovku pomocí:

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

Pokud je na displeji více místa, než je šíře obrázku, obrázek se zobrazí v originálních rozměrech. Při zmenšování okna se potom bude zmenšovat, aby se vždy zobrazil celý.

Zmenšování obrázku při změně velikosti okna

Dosáhnout podobného chování je někdy potřebné i pro obrázkové pozadí. CSS vlastnost background-size ale nastavení maximální velikosti neumožňuje. Použití „background-size: 100%“ by způsobilo prosté roztažení pozadí i nad jeho skutečnou šířku.

Docílit chování jako u <img> s max-width jde ale menším trikem s využitím @media. Díky tomu se „background-size: 100%“ aplikuje jen v případě, že je stránka užší než pozadí, takže 100% velikost pozadí zafunguje žádoucím způsobem.

.image {
  background: url(i/400x40) no-repeat;
  height: 40px;
}
@media (max-width: 400px) {
  .image {
    background-size: 100%;
  }
}

Měl-li by element s obrázkovým pozadím navíc přizpůsobovat svou výšku aktuální šířce, jde využít triku s nulovou výškou a paddingem v procentech dle poměru stran obrázku.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS obrázková galerie

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

Vícenásobné CSS pozadí

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

Obtékané boxy s proměnlivou šířkou

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Responsivní menu

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

Responsivní CSS mřížka

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

Komentáře