CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Responzivní webový design – obrázky


Změňte velikost okna prohlížeče, abyste viděli, jak se obrázek přizpůsobí stránce.


Použití vlastnosti šířka

Pokud je widthvlastnost nastavena na procenta a heightvlastnost je nastavena na „auto“, bude obrázek reagovat a bude se zvětšovat a zmenšovat:

Příklad

img {
  width: 100%;
  height: auto;
}

Všimněte si, že ve výše uvedeném příkladu lze obrázek zvětšit tak, aby byl větší, než je jeho původní velikost. Lepším řešením v mnoha případech bude max-widthmísto toho použít nemovitost.


Použití vlastnosti max-width

Pokud je max-widthvlastnost nastavena na 100 %, obrázek se v případě potřeby zmenší, ale nikdy se nezvětší, aby byl větší než jeho původní velikost:

Příklad

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

Přidejte obrázek na ukázkovou webovou stránku

Příklad

img {
  width: 100%;
  height: auto;
}


Obrázky na pozadí

Obrázky na pozadí mohou také reagovat na změnu velikosti a měřítka.

Zde si ukážeme tři různé metody:

1. Pokud je background-sizevlastnost nastavena na "contain", obrázek na pozadí se změní a pokusí se přizpůsobit oblasti obsahu. Obrázek si však zachová svůj poměr stran (proporcionální vztah mezi šířkou a výškou obrázku):


Zde je kód CSS:

Příklad

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

2. Pokud je background-sizevlastnost nastavena na „100 % 100 %“, obrázek na pozadí se roztáhne tak, aby pokryl celou oblast obsahu:


Zde je kód CSS:

Příklad

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

3. Pokud je background-sizevlastnost nastavena na "cover", obrázek na pozadí se změní tak, aby pokryl celou oblast obsahu. Všimněte si, že hodnota „cover“ zachovává poměr stran a některá část obrázku na pozadí může být oříznuta:


Zde je kód CSS:

Příklad

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Různé obrázky pro různá zařízení

Velký obraz může být perfektní na velké obrazovce počítače, ale k ničemu na malém zařízení. Proč načítat velký obrázek, když jej stejně musíte zmenšit? Chcete-li snížit zatížení nebo z jiných důvodů, můžete pomocí dotazů na média zobrazit různé obrázky na různých zařízeních.

Zde je jeden velký obrázek a jeden menší obrázek, který se zobrazí na různých zařízeních:

Příklad

/* For width smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

min-device-widthMísto šířky prohlížeče můžete použít dotaz na média min-width, který kontroluje šířku zařízení. Potom se obrázek při změně velikosti okna prohlížeče nezmění:

Příklad

/* For devices smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Element <picture> HTML

Element HTML <picture>poskytuje webovým vývojářům větší flexibilitu při specifikování zdrojů obrázků.

The most common use of the <picture> element will be for images used in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used:

Example

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

The srcset attribute is required, and defines the source of the image.

The media attribute is optional, and accepts the media queries you find in CSS @media rule.

You should also define an <img> element for browsers that do not support the <picture> element.