Umiestňovanie obrázkov
Vlastnosť float
Ukladanie elementov napríklad z opačnej strany, sprava doľava sa dá pomocou vlastnosti float (vznášať sa, plynutie).
Pôvodne bola táto vlastnosť určená na nastavenia obtekania (zobrazenia) textu okolo obrázka (img). Poďme si teda ukázať
jej základné, resp. pôvodné využitie. Umiestnenie obrázka v texte je bežná situácia dá sa porovnať s vkladaním obrázkov
vo Worde.
Ak ste chceli, aby bol obrázok umiestnený na ľavú stranu, bolo potrebné nastaviť obtekanie, inak obrázok a text
nemohli byť na rovnakých riadkoch. Presne toto nastavenie predstavuje vlastnosť float. Túto vlastnosť priradíme
obrázku nastavením left (obrázok bude naľavo a text napravo) alebo right (obrázok bude napravo). Ukážeme si najskôr
úplne jednoduchý prípad.
Obrázok je vľavo bez okrajov, dodržal som proporcie v pomere 4:3, určil som rozmery, nato
nikdy nezabudnite. Najskôr som musel vložiť obrázok, aby následne text mal čo obtekať.
<img style="float: left"; src="obrazky\skola3.jpg" width="160" height="120">
Podrobnejšie nastavenie
Predchádzajúce nastavenie bolo veľmi jednoduché a v praxi ho potrebujeme obyčajne
upresniť. Ukážeme si teda ďalšie atribúty, ktoré pri vkladaných obrázkoch používame.
Okrem atribútov, ktoré sme použili pri prvom obrázku, sú použité aj ďalšie. Obrázok je zarovnaný
vpravo, pridal som text pre nevidiacich, udal som rozmery, určil som okraje nasledovne. Zľava a sprava som
dal okraje 10px, nad a pod obrázkom je medzera 5px.Trochu som musel dať pozor, kam v kóde umiestniť riadok s vložením
obrázku, aby ste videli všetky štyri okraje. Preto je obrázok vložený až po prvej vete. Jednoducho táto vlastnosť
vraví – umiestni ma z danej strany najvyššie, kde je voľné miesto.
Vlastnosťou float určujeme, či jednotlivé elementy majú ísť za sebou z ľavej
alebo z pravej strany, čiže určíme iba smer príchodu. Čo je ale najväčšia výhoda tejto vlastnosti je to, že sa táto
vlastnosť pri viacerých elementoch s rôznymi hodnotami prejaví aj spolu na jednom riadku.
Tu je kód, ktorý som použil na vloženie obrázku.
<img src="obrazky\pes.jpg" alt="Pes" style="width: 100px; height: 75px; border: 2px solid;
margin-left: 10px; margin-right: 10px; margin-top: 0px; margin-bottom: 30px; float: right">
Táto vlastnosť sa využíva veľmi často, keď chceme mať niečo vždy naľavo a niečo oproti napravo v danom elemente.
Absolútna a relatívna poloha
Určite netrpezlivo čakáte na spôsob, ako obrázky umiestniť tam, kde ich potrebujete. Dobrá správa je, že rovnako ako texty.
Následne som vložil logo riadkom:
<div class="foto">
<img src="obrazky\zvolen.jpg" style="margin-top:-20px; margin-left:50px;
margin-right:10; float: left;">
</div>
Aby ste videli vkladanie obrázkov s relatívnou polohou, tak som našu školu vložil sem vpravo cez relativnu
polohu s pomocou novej vlastnosti .foto1 . Ak pozíciu nastavíte na oblasť textu, ten bude obrázkom zakrytý. Stačí v style.css zmeniť hodnotu pre top vo vlastnosti .foto1
Upozornenie pre prácu s obrázkami
Chcel by som upozorniť, že najväčšie problémy neriešim v žiackych prácach s pozíciou, ale veľkosťou a s pomerom
strán fotiek.
Ak vložíte originál fotiek, ktoré stiahnete s fotoaparátu, či smartfónu, majú niekoľko MB a rozlíšenie niekoľko tisíc pixlov.
Všimnite si, že moje vložené obrázky sú vo veľkostiach rádovo v stovkách pixlov.
Konkrétne, ak fotka má 4032x3024 pixlov a veľkosť cca 4MB, tak po zmenšení na 1200x900 pixlov je veľkosť už len 200 MB. Foto
v tejto veľkosti by aj tak u väčšiny Vašich návštevníkov zabrala celý monitor. Takže aj tak treba veľkosť zobrazenia upraviť cez
width a height napr. na 800x600, prehliadač ale musí načítať celý objem. Ak vložíte čo len jeden originál,
tak 4MB načítať cez wifinu chvíľu potrvá.
Keď zmenšujete fotku, musíte dodržať pomer strán z originálu. Aplikácie, ktoré použijete na zmenšovanie
to vedia (to je trojčlenka). Napr. Skicár - pravé tlačidlo - Zmena rozmerov a
zaškrtnúť zachovanie rozmerov - bacha na ukladaný formát jpg, či png.
Úlohy v tejto podstránke
- Rozlišujte, či vkladáte obrázky vlastnosťou float ku textu zľava alebo sprava
- Alebo sa snažíte pozicovať obrázok absolútne, či relatívne
- Potrebujete si vyskúšať štyri činnosti
- Vkladanie obrázkov obtekaním zľava a sprava, pozicovať absolútne a relatívne (meňte súradnice polohy obrázkov)
- Prejdite na Fotogalérie