Kas soovite lisada oma veebilehele pildi, aga te ei tea, kuidas selle suurust disainile sobivaks kohandada? Kas soovite õppida, kuidas kasutada HTML-märgendeid ja atribuute pildi laiuse ja kõrguse muutmiseks? Kas teate iga meetodi eeliseid ja puudusi? Kui vastus on jaatav, on see artikkel teie jaoks.
Selles artiklis Me õpetame teile, kuidas reguleerida pildi suurust html-is, kasutades erinevaid võimalusi ja ressursse, mis võimaldavad teil luua oma veebisaidi jaoks atraktiivseid ja optimeeritud pilte. Samuti näitame teile iga valiku eeliseid ja puudusi, samuti mõningaid näpunäiteid ja häid tavasid teie töö parandamiseks.
Mis on pilt html-is ja kuidas seda sisestada
Pilt html-is on element, mis võimaldab teil kuvada objekti visuaalne esitus, inimene, maastik või midagi muud. Pildi lisamiseks html-i kasutatakse silti , mis on tühi silt, st. millel pole sulgemist.
Silt sellel on mitu atribuuti, mis võimaldavad teil määrata pildi teavet ja omadusi. Kõige olulisemad on:
- src: on atribuut, mis näitab pildifaili teed või aadressi. See võib olla suhteline tee (samal veebisaidil) või absoluutne tee (teisel veebisaidil). Näiteks: kas .
- alt: on atribuut, mis näitab pildi alternatiivset teksti, st teksti, mis kuvatakse, kui pilti ei saa laadida või kasutatakse ekraanilugejat. See on kohustuslik atribuut ning peab kirjeldama pildi sisu või funktsiooni. Näiteks: .
- pealkiri: on atribuut, mis näitab pildi pealkirja, st tekst, mis kuvatakse kursori hõljutamisel pildi kohta. See on valikuline atribuut ja võib alternatiivtekstist erineda. Näiteks: .
Kuidas reguleerida suurust laiuse ja kõrguse atribuutide abil
Üks lihtsamaid viise pildi suuruse reguleerimiseks html-is on laiuse ja kõrguse atribuutide kasutamine), mis võimaldavad määrata pildi laiuse ja kõrguse pikslites. Näiteks:
Nendel atribuutidel on mõned eelised ja puudused:
- Eelised:
- Neid on lihtne kasutada ja need ei nõua lisateadmisi.
- Need võimaldavad reserveerida pildile enne selle laadimist vajaliku ruumi, mis ei lase leheküljel laadimise ajal hüpata ega muutuda.
- annab teile võimaluse kohandada pildi suurust kujundusega leheküljel ilma algset faili muutmata.
- Puudused:
- Need võivad moonutada pildi kuvasuhet või kvaliteeti, kui kasutatakse muid väärtusi peale originaalsuuruse.
- See ei võimalda pildi suurust kohandada vastavalt kasutaja ekraani või seadme suurusele.
- Need ei luba efekte rakendada või pildi täiendavaid stiile.
Kuidas CSS-i abil html-vormingus pildi suurust muuta
Teine võimalus arenenum ja paindlikum Pildi suuruse reguleerimine HTML-is tähendab CSS-i (Cascading Style Sheets) kasutamist, mis on keel, mis võimaldab teil HTML-elementidele stiile määratleda ja rakendada. CSS-i kasutamiseks võite kasutada silti html-dokumendi sees väline fail laiendiga .css. Näiteks:
img { width: 500px; height: 600px; } kas
CSS-i kasutamisel on mõned eelised ja puudused:
- Eelised:
- Võimaldab pildi suurust proportsionaalselt reguleerida, kasutades atribuuti objektile sobitamine või funktsiooni calc().
- Reguleerime pildi suurust olenevalt kasutaja ekraani või seadme suurusest, kasutades suhtelisi ühikuid (%, em, vw, vh) või meediapäringuid.
- Pildile saab rakendada täiendavaid efekte või stiile, nagu äärised, varjud, filtrid või teisendused.
- Puudused:
- Nõuab suuremaid teadmisi ja valdamist CSS-i keeles.
- Võib tekitada konflikte või ebakõlasid lehel või pildil rakendatud muude stiilidega.
- Kui kasutatakse liiga palju stiile või efekte, võib see mõjutada jõudlust või lehe laadimise kiirust.
Kuidas välise programmi abil suurust reguleerida
Kolmas võimalus kohandamiseks pildi suurus html-vormingus on kasutada välist programmi, mis võimaldab muuta pildifaili suurust enne selle lehele sisestamist. Mõned neist programmidest on järgmised:
- GIMP: on tasuta ja avatud lähtekoodiga programm, mis võimaldab teil pilte professionaalselt redigeerida ja töödelda. GIMP-iga saate muuta pildi suurust Kasutades valikut "Scale Image". menüüst "Pilt". Samuti saate optimeerida pildi kaalu ja kvaliteeti, kasutades menüüs „Fail” valikut „Ekspordi kui”. GIMP-i saate alla laadida selle ametlikult veebisaidilt.
- Photoshop: on tasuline ja suunamisprogramm, mis võimaldab teil pilte täiustatud viisil luua ja redigeerida. Photoshopiga saate muuta pildi suurust, kasutades menüüs "Pilt" valikut "Image Size". Samuti saate optimeerida kaalu ja pildikvaliteeti kasutades valikut „Salvesta veebi jaoks”. menüüst "Fail". Photoshopi saate alla laadida selle ametlikult veebisaidilt.
- Internetis pildi suuruse muutja: on tasuta võrgutööriist, mis võimaldab teil muuta pildi suurust ilma programmi installimata. Online Image Resizeri abil saate oma arvutist või URL-ilt pildi üles laadida, valige soovitud laius ja kõrgus ning laadige alla muudetud pilt. Online Image Resizerile pääsete juurde selle ametlikult veebisaidilt.
Reguleerige pilti nii, nagu soovite
Selles artiklis oleme näidanud, kuidas suurust reguleerida pildi HTML-vormingus, kasutades erinevaid valikuid ja ressursse, mis võimaldavad teil luua oma veebisaidi jaoks atraktiivseid ja optimeeritud pilte. Samuti oleme teile näidanud iga valiku eeliseid ja puudusi, samuti mõned näpunäited ja head tavad oma töö parandamiseks.
Loodame, et see artikkel oli teile kasulik ja julgustatakse teid proovima neid valikuid ja ressursse pildi suuruse kohandamiseks HTML-is. Pidage meeles, et kõige tähtsam on valida valik, mis vastab kõige paremini teie vajadustele ja eesmärkidele.
Kui teile see artikkel meeldis, jagage seda oma sõpradega. Ja kui soovite saada rohkem näpunäiteid ja nippe html-i ja muude rakenduste kohta, külastage meie veebisaiti. Näeme!