Ach ne! Kde je JavaScript?
Váš webový prohlížeč nemá povolen JavaScript nebo nepodporuje JavaScript. Pro správné zobrazení tohoto webu nebo pro upgrade na webový prohlížeč, který podporuje JavaScript, povolte JavaScript ve webovém prohlížeči.
PHP-Fusion 9 Jádro
v9.03.00
Překlad CZ/SK
Pravidelně aktualizovaný
Demo
Testovat PHP-Fusion

Novinky

Jak správně nastavit výřez obrázků

Jak správně nastavit výřez obrázků
06. 03. 2017 - Webdesign definuje výřez jako viditelnou oblast uživatele na webové stránce. My si pro fotografie na webu popravíme tuto definici tak, že výřez konkrétního obrázku (jeho zmenšení) na HomePage můžeme řídit pomocí < meta > značky a jeho direktivy "viewport". Podívejte se jak.

Výřezu se tudíž mění v závislosti na zařízení, které pro prohlížení webu používáte. Bude tedy menší na mobilním telefonu, či tabletu, než na obrazovce počítače. Před tablety a mobilními telefony byly webové stránky designery navrženy pouze pro počítačové monitory. Prostě jen pro obyčejné webové stránky, které mají statickou konstrukci a pevnou velikost.

Později, když jsme všicgni začali surfovat na Internetu pomocí tabletů a mobilních telefonů staly se mobilní telefóny překážkou pro zobrazování. Pevné velikosti webové stránky byly příliš velké, aby se vešly do stanoveného výřez na HomePage. Bylo nutné tento problém odstranit, aby prohlížeče v těchto zařízeních obrázky dokázaly zmenšit tak, aby se vešly nejen na obrazovku, ale také do konkretního rozměru width a hight.

Nastavení výřezu

Nová specifikace HTML5 zavedla metodu, aby weboví designéři převzali kontrolu nad výřezu, a to prostřednictvím < meta >značky. Proto tuto značku dáváme v DOCTYPE do hlavičky < head > následujícím zápisem.

< meta name="viewport" content="width=device-width, initial-scale=1.0" >



Takže značka/tag/element < meta > vlastně dává pokyny prohlížeči, jak řídit rozměry a měřítko stránky.

width=device-width Nastaví část šířky obrázku resp. zařízení které se bude lišit v závislosti na desktopu, tabletu a mobilním telefonu.

initial-scale=1.0 Nastaví počáteční úroveň zoomu při prvním načtení v prohlížeči.

Spolupráce s CSS

Pro nastavení potřebného výřezu pro obrázky na HomePage je nutné ještě vložit do kakádových stalů následující zápis. V CMS PHP-Fusion v.9.02, RC5 používám ve složce CSS tyto dva zápisy:


.panel.panel-home {
border: 1px solid red;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}



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



Galerie

Image #334
Kvido 06.03.2017 05:04 1,131 0 komentářů

0 komentářů

Zanechat komentář

Přihlaste se, abyste mohli zveřejnit komentář.
  • Žádné komentáře nebyly zveřejněny.

Nejnovější témata fóra
  Vlákno Zobrazení Odpovědi Poslední příspěvek
Lost password
v Administrace uživatelů
109 7 Balin50
25-03-2019 19:52
Banner
v Administrace obsahu
107 2 Balin50
25-03-2019 17:42
Ako skryt welcome spravu pre prihlasenych
v Pomoc
123 2 jany
19-03-2019 22:06
Užívatelské polia
v PHP-Fusion 9
407 19 Balin50
19-03-2019 18:00
Vlastné stránky
v PHP-Fusion 9
178 3 Balin50
18-03-2019 21:15
Tvorba Theme - ( Bootstrap )
v PHP-Fusion 9
225 5 RobiNN
17-03-2019 21:45
Chyba databáze
v PHP-Fusion 8
4191 12 RobiNN
14-03-2019 12:29
Přihlášení
Ještě nejste členem? Klikněte zde a zaregistrujte se.
Nejčtenější novinky