PHP min. 5.6.8MySQL min. 5.1Apache min. 2.0
PHP-Fusion 9 Jádro
v9.0
Český překlad
Pravidelně aktualizovaný

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

Kvido 06.03.2017 06:04 559 0 komentářů

0 komentářů

Zanechat komentář

Přihlaste se, abyste mohli zveřejnit komentář.
  • Žádné komentáře byly zveřejněny.
Nejnovější témata fóra
  Vlákno Zobrazení Odpovědi Poslední příspěvek
Preklad
v PHP - Fusion 9.0.3
98 2 Balin50
24-06-2018 12:00
Užívatelia a priatelstvo
v PHP - Fusion 9.0.3
78 2 Balin50
24-06-2018 11:53
Nezobrazují se mi obrázky
v PHP - Fusion 7
87 5 Escalade
23-06-2018 21:08
Migrace phpfusion
v PHP - Fusion 7
367 17 Kvido
23-06-2018 12:13
Video panel from one category
v Administrace obsahu
58 3 zizub
22-06-2018 20:16
reCAPTCHA
v PHP - Fusion 9.0.3
102 1 RobiNN
22-06-2018 15:42