HTML značajke: dimenzije i promjene slike

Optimalna uporaba slika zahtijeva konverziju visine i širine originala radi ispravnog umetanja u dizajn mjesta. Tipično, sliku unose posjetitelj, voditelj online trgovine, zaposlenik tvrtke itd. Uvođenje informacija i slika određeno je svrhom web-resursa. U svim slučajevima, potrebno je prilagoditi stvarnu sliku mjestu koje mu je dodijeljeno na stranici web-resursa.

HTML oznaka za prikaz crteža

Img tag se koristi za prikaz slike u pregledniku. Programer u ovoj oznaci navodi HTML dimenzije slike, širinu okvira i stvarnu adresu datoteke koja sadrži crtež. Oznaka img nema načina određivanja položaja slike. Možete odrediti samo stvarnu veličinu ili promjenu veličine.


U ovom primjeru, stvarna slika se prikazuje u stvarnoj veličini na lokaciji img oznake, 50% smanjenja visine i širine i iskrivljena verzija kada se visina samo mijenja. Praktičan način promjene veličine slike u HTML-u, kao i njegov stvarni položaj, sugerira korištenje CSS-a.
Ovdje img oznaka sadrži naznaku izvora slike, a njezine dimenzije i položaj opisani su u CSS datoteci. Treba napomenuti da je, kao u slučaju img, promjena veličine stila proporcionalna veličini slike.

Mjesto izračunavanja veličine slika

Postoje dvije mogućnosti, kao i gdje možete izvršiti konverziju visine i širine slike. Varijanta poslužitelja (na primjer, PHP) je statična,Varijanta preglednika (javascript) je značajka dinamike.


Korištenje jezika poslužitelja nastaje pri obradi velikih količina podataka i orijentirano je na formiranje baza podataka, primjerice raspon robe u internetskoj trgovini.
Preuzimanjem crteža robe u trgovinu, upravitelj možda ne brine kako će taj ili onaj proizvod izgledati. Razvojnik web-resursa (online trgovine) može razviti algoritam za automatsko određivanje potrebne veličine za bilo koji proizvod: hladnjak i kapa za plivanje bit će prikazani u istoj kvaliteti. Značajke javascripta obično se koriste ne za pretvaranje visine i širine slike, već za poboljšanje udobnosti posjetitelja. Na primjer, programer može dodijeliti događaj oznaci koja sadrži sliku proizvoda, a pomicanjem miša preko njega prikazat će se proizvod u većem obliku. Ovdje nije potrebno preuzeti sliku, ali ako je korištena mala slika, povećavanje slike će zamutiti konture.
Praksa korištenja javascripta za promjenu veličine slike u HTML-u je popularna. Posebno je važno ne samo povećati sliku, nego i prikazati njezine dijelove u zasebnom prozoru (oznaci). U tu svrhu obično se koriste dvije slike istog proizvoda: jedna je glavna, druga je detaljna.

Ostale opcije za prikazivanje slika

U svakodnevnoj praksi zahtijeva se izravna upotreba, ali ne i za slike u kontekstu: roba u trgovini, fotografija zaposlenika na listu odračunovodstvo osoblja, proces oblikovanja zaslona, ​​poveznica na prezentaciju ili portfelj.
Idealno je primijeniti img oznaku za male crteže - ikone. To je zgodno, praktično i ne zahtijeva korištenje CSS-a za opisivanje ove oznake. To je više prikladan za korištenje HTML i slike veličine div ili span.
U ovom primjeru oznaka div id scLine sadrži sliku koja se pozicionira pomoću CSS-a. Veličine HTML slika postavljaju se CSS pravilima. Unutar ovog čuda nalazi se img tag, koji se također može lako postaviti, a može se postaviti i na željenu veličinu. Glavna značajka ovog rješenja - oznaka DIV HTML i veličina pozadinske slike mogu oblikovati pomoćni dizajn za img. Stil img opisa može ostati nepromijenjen, ali se stil vanjske oznake može promijeniti. Programer može formulirati mnoga zanimljiva rješenja i stvoriti udoban prikaz grafičkih informacija.

Korištenje CMS-a i ručni razvoj

Samo koristite HTML. Lako je promijeniti veličinu slike, njezin položaj i transparentnost. Jednostavno spojite javascript rukovatelj na događaj i dajte im dinamiku. Prilikom korištenja sustava za upravljanje web-mjestima, neke su mogućnosti teško koristiti. Svaki CMS "smatra svojom dužnošću" nametati svoju doktrinu o prikazu slika i njihove dinamike kada ih posjetitelj promatra.
Međutim, svaki CMS daje developeru mogućnost nadopunjavanja i PHP koda i funkcionalnosti javascripta. Ovu značajku možete upotrijebiti da biste svojim web-lokacijama dali jedinstvenu vidljivost u pozadiniproizvodi izvršeni na sličnim CMS-ovima. Osoba web-resursa uvijek je važna, pogotovo kada se izvršava ne u ručnom razvoju (koji je uvijek jedinstven), već na temelju poznatog sustava upravljanja web-lokacijama.

Povezane publikacije