Hvernig á að stilla stærð myndar í html á mismunandi vegu

breidd og hæð í html

Viltu setja mynd inn á vefsíðuna þína, en þú veist ekki hvernig á að stilla stærðina til að passa við hönnunina? Viltu læra hvernig á að nota HTML merki og eiginleika til að breyta breidd og hæð myndar? Veistu kosti og galla hverrar aðferðar? Ef svarið er já, þá er þessi grein fyrir þig.

Í þessari grein, Við ætlum að kenna þér hvernig á að stilla stærð myndar í html, með því að nota mismunandi valkosti og úrræði sem gera þér kleift að búa til aðlaðandi og fínstilltar myndir fyrir vefsíðuna þína. Við ætlum líka að sýna þér kosti og galla hvers valkosts, auk nokkurra ráðlegginga og góðra starfsvenja til að bæta starf þitt.

Hvað er mynd í html og hvernig á að setja hana inn

HTML síðukóðun

Mynd í html er þáttur sem gerir þér kleift að birta sjónræn framsetning á hlut, manneskja, landslag eða eitthvað annað. Til að setja inn mynd í html er merkið notað , sem er tómt merki, þ.e. sem hefur enga lokun.

Merkið hefur nokkra eiginleika sem gera þér kleift að tilgreina upplýsingar og eiginleika myndarinnar. Þau mikilvægustu eru:

  • src: er eigindin sem gefur til kynna slóð eða heimilisfang myndskrárinnar. Það getur verið afstæð leið (innan sömu vefsíðu) eða alger leið (á annarri vefsíðu). Til dæmis: hvort sem er .
  • alt: er eiginleiki sem gefur til kynna annan texta myndarinnar, það er textinn sem birtist þegar ekki er hægt að hlaða myndinni eða skjálesari er notaður. Það er lögboðinn eiginleiki og verður að lýsa innihaldi eða hlutverki myndarinnar. Til dæmis: .
  • titill: er eiginleiki sem gefur til kynna titil myndarinnar, það er textinn sem birtist þegar bendillinn er færður yfir um myndina. Það er valfrjáls eiginleiki og getur verið öðruvísi en alt texti. Til dæmis: .

Hvernig á að stilla stærðina með því að nota breidd og hæð eiginleika

thml kóða töflu

Ein auðveldasta leiðin til að stilla stærð myndar í html er að nota breidd og hæð eiginleika) sem gerir þér kleift að tilgreina breidd og hæð myndarinnar í pixlum. Til dæmis:

Þessir eiginleikar hafa nokkra kosti og galla:

  • Kostir:
    • Þau eru auðveld í notkun og krefjast ekki frekari þekkingar.
    • Þeir gera þér kleift að panta nauðsynlegt pláss fyrir myndina áður en hún er hlaðin, sem kemur í veg fyrir að síðan hoppa eða breytist við hleðslu.
    • gefur þér kost á aðlaga myndstærðina að hönnuninni síðunnar án þess að þurfa að breyta upprunalegu skránni.
  • Ókostir:
    • Þeir geta brenglað stærðarhlutfall eða gæði myndarinnar ef önnur gildi en upprunaleg stærð eru notuð.
    • Það leyfir ekki að stilla myndstærð í samræmi við stærð skjás eða tækis notandans.
    • Þeir leyfa ekki að beita áhrifum eða fleiri stíl við myndina.

Hvernig á að breyta stærð myndar í html með CSS

Tölvuskjár með html

Önnur leið fullkomnari og sveigjanlegri Til að stilla stærð myndar í HTML er að nota CSS (Cascading Style Sheets), sem er tungumál sem gerir þér kleift að skilgreina og nota stíla á HTML þætti. Til að nota CSS geturðu notað merkið inni í html skjalinu, ytri skrá með .css endingunni. Til dæmis:

img { width: 500px; height: 600px; } hvort sem er

Notkun CSS hefur nokkra kosti og galla:

  • Kostir:
    • Gerir þér kleift að stilla myndstærðina hlutfallslega með því að nota object-fit eiginleikann eða calc() aðgerðina.
    • Við skulum stilla myndstærðina eftir stærð skjás eða tækis notandans, með því að nota hlutfallslegar einingar (%, em, vw, vh) eða fjölmiðlafyrirspurnir.
    • Hægt er að beita viðbótarbrellum eða stílum á myndina, svo sem ramma, skugga, síur eða umbreytingar.
  • Ókostir:
    • Krefst meiri þekkingu og leikni á CSS tungumálinu.
    • Getur skapað árekstra eða ósamræmi með öðrum stílum sem notaðir eru á síðuna eða myndina.
    • Það getur haft áhrif á frammistöðu eða hleðsluhraða síðu ef of margir stílar eða áhrif eru notuð.

Hvernig á að stilla stærðina með utanaðkomandi forriti

HTML tungumál í töflu

Þriðji valkosturinn til að stilla stærð myndar í html er að nota utanaðkomandi forrit sem gerir þér kleift að breyta stærð myndskrárinnar áður en þú setur hana inn á síðuna. Sum þessara forrita eru:

  • GIMP: er ókeypis og opinn hugbúnaður sem gerir þér kleift að breyta og vinna myndir á fagmannlegan hátt. Með GIMP geturðu breytt stærð myndar Notaðu valkostinn „Scale Image“ úr valmyndinni „Mynd“. Þú getur líka fínstillt þyngd og gæði myndarinnar með því að nota „Flytja út sem“ valkostinn í „File“ valmyndinni. Þú getur halað niður GIMP frá opinberu vefsíðu þess.
  • Photoshop: er greitt og tilvísunarforrit sem gerir þér kleift að búa til og breyta myndum á háþróaðan hátt. Með Photoshop geturðu breytt stærð myndar með því að nota „Myndastærð“ valmöguleikann í „Mynd“ valmyndinni. Þú getur líka fínstillt þyngd og myndgæði með því að nota „Vista fyrir vef“ valkostinn úr "File" valmyndinni. Þú getur halað niður Photoshop frá opinberu vefsíðu þess.
  • Myndbreyting á netinu: er ókeypis tól á netinu sem gerir þér kleift að breyta stærð myndar án þess að þurfa að setja upp forrit. Með Online Image Resizer geturðu hlaðið upp mynd úr tölvunni þinni eða af vefslóð, veldu þá breidd og hæð sem þú vilt og halaðu niður breyttu myndinni. Þú getur fengið aðgang að Online Image Resizer frá opinberu vefsíðu þess.

Stilltu myndina eins og þú vilt

html tungumálakóði

Í þessari grein við höfum sýnt þér hvernig á að stilla stærðina af mynd í HTML, með því að nota mismunandi valkosti og úrræði sem gera þér kleift að búa til aðlaðandi og fínstilltar myndir fyrir vefsíðuna þína. Við höfum einnig sýnt þér kosti og galla hvers valkosts, auk nokkurra ráðlegginga og góðra starfsvenja til að bæta starf þitt.

Við vonum að þessi grein hafi verið gagnleg fyrir þig og að þú sért hvattur til að prófa þessa valkosti og úrræði til að stilla stærð myndar í HTML. Mundu að það mikilvægasta er að velja valkosturinn sem hentar þínum þörfum og markmiðum best.

Ef þér líkaði við þessa grein, deildu henni með vinum þínum. Og ef þú vilt vita fleiri ráð og brellur um html og önnur forrit, farðu á heimasíðu okkar. Sjáumst!


Vertu fyrstur til að tjá

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.