IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

5. diel - Responzívne obrázky - Resolution switching a Art redirection

V predchádzajúcej lekcii, Dokončenie responzívneho menu, sme si vytvorili jednoduché responzívne menu metódou mobile-first pre desktopy a tablety s využitím @media.

Dnes sa pozrieme na to, ako na weboch prispôsobiť obrázky pre mobilné zariadenia.

Pretekajúci obrázok

Najčastejší problém s obrázkami je, že sa na displej telefónu nezmestia. Tým pádom vytečú a zobrazia sa scrollbary. Obrázky často nahrávame na web cez rôzne administračné nástroje a majú často väčšie rozlíšenie, než aké chceme v článku zobraziť. Preto im v editore nastavím


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár korún

Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.

Kúpiť tento kurz

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh a certifikátom iba za 175 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto balíčku získaš prístup ku všetkým 14 článkom (13 lekcií, test) tohoto kurzu.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Neobmedzený a trvalý prístup k jednotlivým lekciím.
  • Kvalitné znalosti v oblasti IT.
  • Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.

Popis článku

Požadovaný článok má nasledujúci obsah:

V HTML a CSS tutoriále si ukážeme niekoľko spôsobov, ako prispôsobiť obrázky na našom webe pre mobilné zariadenia a to ako rozmerom, tak aj obsahom.

Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.

Článok pre vás napísal Štěpán Zavadil
Avatar
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity