Moderní tvorba webových aplikací

O webu

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

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.

Související články

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

4 minuty

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 minut

Text v obrázku

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

6 minut

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

5 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025