Si të rregulloni madhësinë e një imazhi në html në mënyra të ndryshme

gjerësia dhe lartësia në html

Dëshironi të futni një imazh në faqen tuaj të internetit, por nuk dini si ta rregulloni madhësinë e tij për t'iu përshtatur dizajnit? Dëshironi të mësoni se si të përdorni etiketat dhe atributet HTML për të modifikuar gjerësinë dhe lartësinë e një imazhi? A i dini përfitimet dhe disavantazhet e secilës metodë? Nëse përgjigja është po, ky artikull është për ju.

Në këtë artikull, Ne do t'ju mësojmë se si të rregulloni madhësinë e një imazhi në html, duke përdorur opsione dhe burime të ndryshme që do t'ju lejojnë të krijoni imazhe tërheqëse dhe të optimizuara për faqen tuaj të internetit. Ne gjithashtu do t'ju tregojmë avantazhet dhe disavantazhet e secilit opsion, si dhe disa këshilla dhe praktika të mira për të përmirësuar punën tuaj.

Çfarë është një imazh në html dhe si ta futni atë

Kodimi i faqes HTML

Një imazh në html është një element që ju lejon të shfaqni një paraqitje vizuale e një objekti, një person, një peizazh apo ndonjë gjë tjetër. Për të futur një imazh në html përdoret etiketa , e cila është një etiketë bosh, d.m.th. që nuk ka mbyllje.

Etiketa ka disa atribute që ju lejojnë të specifikoni informacionin dhe karakteristikat e imazhit. Më të rëndësishmet janë:

  • src: është atributi që tregon shtegun ose adresën e skedarit të imazhit. Mund të jetë një rrugë relative (brenda të njëjtës faqe interneti) ose një shteg absolut (në një uebsajt tjetër). Për shembull: qoftë .
  • alt: është atributi që tregon tekstin alternativ të figurës, pra tekstin që shfaqet kur imazhi nuk mund të ngarkohet ose përdoret një lexues ekrani. Është një atribut i detyrueshëm dhe duhet të përshkruajë përmbajtjen ose funksionin e imazhit. Për shembull: .
  • Titulli: është atributi që tregon titullin e imazhit, domethënë teksti i shfaqur kur kursori qëndron pezull në lidhje me imazhin. Është një atribut opsional dhe mund të jetë i ndryshëm nga teksti alt. Për shembull: .

Si të rregulloni madhësinë duke përdorur atributet e gjerësisë dhe lartësisë

tabela e kodeve thml

Një nga mënyrat më të lehta për të rregulluar madhësinë e një imazhi në html është përdorimi i atributeve gjerësi dhe lartësi) që ju lejojnë të specifikoni gjerësinë dhe lartësinë e imazhit në pixel. Për shembull:

Këto atribute kanë disa avantazhe dhe disavantazhe:

  • Përfitimet:
    • Ato janë të lehta për t'u përdorur dhe nuk kërkojnë njohuri shtesë.
    • Ato ju lejojnë të rezervoni hapësirën e nevojshme për imazhin përpara se ta ngarkoni atë, gjë që parandalon kërcimin ose ndryshimin e faqes gjatë ngarkimit.
    • ju jep mundësinë e përshtatni madhësinë e imazhit me dizajnin të faqes pa pasur nevojë të modifikoni skedarin origjinal.
  • disavantazhet:
    • Ato mund të shtrembërojnë raportin e pamjes ose cilësinë e figurës nëse përdoren vlera të tjera nga madhësia origjinale.
    • Nuk lejon që madhësia e imazhit të rregullohet sipas madhësisë së ekranit ose pajisjes së përdoruesit.
    • Ata nuk lejojnë aplikimin e efekteve ose stile shtesë për imazhin.

Si të ndryshoni madhësinë e një imazhi në html duke përdorur CSS

Një ekran kompjuteri me html

Një mënyrë tjetër më të avancuar dhe fleksibël Për të rregulluar madhësinë e një imazhi në HTML do të thotë të përdorni CSS (Cascading Style Sheets), e cila është një gjuhë që ju lejon të përcaktoni dhe aplikoni stile në elementët HTML. Për të përdorur CSS, mund të përdorni etiketën brenda dokumentit html, një skedar i jashtëm me një shtesë .css. Për shembull:

img { width: 500px; height: 600px; } qoftë

Përdorimi i CSS ka disa avantazhe dhe disavantazhe:

  • Përfitimet:
    • Ju lejon të rregulloni madhësinë e imazhit në mënyrë proporcionale, duke përdorur veçorinë e përshtatjes së objektit ose funksionin calc().
    • Le të rregullojmë madhësinë e imazhit në varësi të madhësisë së ekranit ose pajisjes së përdoruesit, duke përdorur njësi relative (%, em, vw, vh) ose pyetje mediatike.
    • Efektet ose stilet shtesë mund të aplikohen në imazh, të tilla si kufijtë, hijet, filtrat ose transformimet.
  • disavantazhet:
    • Kërkon njohuri dhe zotërim më të madh të gjuhës CSS.
    • Mund të gjenerojë konflikte ose mospërputhje me stile të tjera të aplikuara në faqe ose imazh.
    • Mund të ndikojë në performancën ose shpejtësinë e ngarkimit të faqeve nëse përdoren shumë stile ose efekte.

Si të rregulloni madhësinë duke përdorur një program të jashtëm

Gjuha HTML në tabelë

Një opsion i tretë për t'u përshtatur madhësia e një imazhi në html është përdorimi i një programi të jashtëm që ju lejon të modifikoni madhësinë e skedarit të imazhit përpara se ta futni atë në faqe. Disa nga këto programe janë:

  • GIMP: është një program falas dhe me burim të hapur që ju lejon të redaktoni dhe manipuloni në mënyrë profesionale imazhet. Me GIMP mund të ndryshoni madhësinë e një imazhi Duke përdorur opsionin "Scale Image". nga menyja "Imazhi". Ju gjithashtu mund të optimizoni peshën dhe cilësinë e imazhit duke përdorur opsionin "Export As" në menynë "File". Ju mund ta shkarkoni GIMP nga faqja e tij zyrtare.
  • Photoshop: është një program me pagesë dhe referues që ju lejon të krijoni dhe modifikoni imazhe në një mënyrë të avancuar. Me Photoshop mund të ndryshoni madhësinë e një imazhi duke përdorur opsionin "Image Size" në menunë "Image". Ju gjithashtu mund të optimizoni peshën dhe cilësinë e figurës duke përdorur opsionin "Ruaj për ueb". nga menyja "File". Mund ta shkarkoni Photoshop nga faqja e tij zyrtare.
  • Ndryshimi i madhësisë së imazhit në internet: është një mjet falas online që ju lejon të ndryshoni madhësinë e një imazhi pa pasur nevojë të instaloni ndonjë program. Me Online Image Resizer ju mund të ngarkoni një imazh nga kompjuteri juaj ose nga një URL, zgjidhni gjerësinë dhe lartësinë e dëshiruar dhe shkarkoni imazhin e modifikuar. Ju mund të hyni në Resizer Online Image nga faqja e tij zyrtare e internetit.

Rregulloni imazhin ashtu siç dëshironi

kodi i gjuhës html

Në këtë artikull ne ju kemi treguar se si të rregulloni madhësinë të një imazhi në HTML, duke përdorur opsione dhe burime të ndryshme që do t'ju lejojnë të krijoni imazhe tërheqëse dhe të optimizuara për faqen tuaj të internetit. Ne ju kemi treguar gjithashtu avantazhet dhe disavantazhet e secilit opsion, si dhe disa këshilla dhe praktika të mira për të përmirësuar punën tuaj.

Shpresojmë që ky artikull të ketë qenë i dobishëm për ju dhe se jeni të inkurajuar të provoni këto opsione dhe burime për të rregulluar madhësinë e një imazhi në HTML. Mos harroni se gjëja më e rëndësishme është të zgjidhni opsioni që i përshtatet më së miri nevojave dhe objektivave tuaja.

Nëse ju pëlqeu ky artikull, ndajeni atë me miqtë tuaj. Dhe nëse doni të dini më shumë këshilla dhe truket rreth html dhe aplikacioneve të tjera, vizitoni faqen tonë të internetit. Shihemi!


Lini komentin tuaj

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *

*

*

  1. Përgjegjës për të dhënat: Miguel Ángel Gatón
  2. Qëllimi i të dhënave: Kontrolloni SPAM, menaxhimin e komenteve.
  3. Legjitimimi: Pëlqimi juaj
  4. Komunikimi i të dhënave: Të dhënat nuk do t'u komunikohen palëve të treta përveç me detyrim ligjor.
  5. Ruajtja e të dhënave: Baza e të dhënave e organizuar nga Occentus Networks (BE)
  6. Të drejtat: Në çdo kohë mund të kufizoni, rikuperoni dhe fshini informacionin tuaj.