PHP-Fusion
PHP-Fusion je lehký open source redakční systém (CMS) napsaný v PHP. PHP-Fusion využívá databázi MySQL na ukládání obsahu vašich stránek a obsahuje jednoduchý, ale komplexní a kompletní administrativní systém na správu vašich stránek. PHP-Fusion obsahuje nejběžnější funkce, které byste očekávali v mnoha dalších CMS systémech.
Icon Aktuální verze: 9.0 - 27.4. 2017
Stáhnout
Language Překlad
Stáhnout

Technologie

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

infoadmin 06.03.2017 05:04 373 0 komentářů

0 komentářů

Zanechat komentář

Host
  • Žádné komentáře byly zveřejněny.
Nejnovější témata fóra
  Vlákno Zobrazení Odpovědi Poslední příspěvek
video infusion
v Bugy a chyby
328 7 zizub
17-01-2018 03:05
chyba v súkromných správach
v Administrace obsahu
331 8 Balin50
11-01-2018 20:38
vkladanie videa do infusie
v Administrace obsahu
149 2 Balin50
11-01-2018 17:33
chyba Locale.inc a news.php...
v PHP - Fusion 9.1
279 0 Balin50
09-01-2018 09:07
Nejnovější PHPF 9.1 na test...
v PHP - Fusion 9.1
204 1 Balin50
08-01-2018 12:06
pokus o zmazanie vlákna vo ...
v Administrace obsahu
244 2 Balin50
06-01-2018 13:54
Přihlásit se
Ještě nejste členem? Klikněte zde zaregistrovat se.

ZAJÍMAVÉ ODKAZY

Ubytování v apartmánech v Praze

SMS zdarma do všesch sítí