HTML <img> -elementti

Määrittely ja käyttö

<img> Merkki käytetään kuvien sisällyttämiseen HTML-sivulle.

Teknisesti ottaen kuvaa ei lisätä verkkosivulle, vaan kuvaa linkitetään sivulle.<img> Merkki luo konttorin, johon viitataan kuvan

<img> Merkki sisältää kaksi pakollista ominaisuutta:

  • src - Määritä kuvan polku
  • alt - Jos kuva ei näy jostain syystä, määritä kuvan korvaavat tekstit

Huomio:Lisäksi, aina määritä kuvan leveys ja korkeus. Jos et määritä leveyttä ja korkeutta, sivu saattaa vilkua kuvan lataamisen aikana.

Vinkki:Jos haluat linkittää kuvan toiseen dokumenttiin, vain lisää <img> Merkin sisällä <a> Sisällä merkinnässä (katso alla oleva esimerkki).

Lisäksi:

HTML-opas:HTML-kuvat

HTML DOM -viittausopas:Image-objekti

CSS-opas:Määritä kuvan tyyli

Lisää tietoa:Kuinka käyttää kuvia oikein

Esimerkki

Esimerkki 1

Seuraavassa esimerkissä lisäämme sivulle CodeW3C.com:n insinöörien Shanghain kukkak港essa ottaman krokoskuvan:

<img src="tulip.jpg" alt="Shanghai Flower Port - Krokos" />

Kokeile itse

Shanghai Flower Port - Tulip

Esimerkki 2

Toinen esimerkki kuvan lisäämisestä:

<img src="dancer.png" alt="Tanssija" width="500" height="749">

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alareunalla.

Ominaisuus

Ominaisuus Arvo Kuvaus
alt Teksti Määritä kuvan korvaavat tekstit.
crossorigin
  • anonymous
  • use-credentials
 Salli käyttää kolmannen osapuolen sivustojen kuvia ja canvasia, jotka sallivat yl托域 pääsyn.
height Pixelit Määritä kuvan korkeus.
ismap ismap Määritä kuva palvelimella olevaksi kuvamappaukseksi.
loading
  • eager
  • lazy
 Määritä, tulisiko selain ladata kuvan välittömästi vai lykätä kuvan lataamista tiettyjen ehtojen täyttämiseen asti.
longdesc URL Määritä URL, joka osoittaa kuvan yksityiskohtaisen kuvauksen.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Määritä viittaus tiedot, joita käytetään kuvan hankkimiseen.
sizes Koko Määritä eri sivun asettelun kuvien koossa.
src URL Määritä kuvan polku.
srcset URL-lista Määritä lista kuvista, joita käytetään eri tilanteissa.
usemap #mapname Määritä kuva asiakaskäyttöön tarkoitetuksi kuvamappaukseksi.
width Pixelit Määritä kuvan leveys.

Yleiset attribuutit

<img> Tunnisteet tukevat HTML:n yleiset attribuutit。

tapahtumaparametreja

<img> Tunnisteet tukevat HTML:n tapahtumaparametrit。

Lisää esimerkkejä

Esimerkki 3

Tasoita kuvia (käyttämällä CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Kokeile itse

Esimerkki 4

Lisää kuvan reunaviiva (käyttämällä CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Kokeile itse

Esimerkki 5

Lisää kuvan vasen ja oikea työtila (käyttämällä CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Kokeile itse

Esimerkki 6

Lisää kuvan ylä- ja alavälistyötilat (käyttämällä CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Kokeile itse

Esimerkki 7

Kuinka lisätä kuva toisesta kansioista tai toiselta verkkosivulta:

<img src="/photo/flower.gif" alt="Kukka" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Kokeile itse

Esimerkki 8

Kuinka lisätä kuville hyperlinkit:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Kokeile itse

Esimerkki 9

Miten luoda klikattava alueita sisältävä kuvamappi. Jokainen alue on hyperlinkki:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Kokeile itse

Lue lisää - Kuinka käyttää kuvia oikein

HTML- ja XHTML:n yksi merkittävimmistä ominaisuuksista on kyky sisällyttää kuvia dokumentin tekstiin, joko sisäänrakennettuna objektina (sidoskuva) tai erillisenä dokumenttina, joka voidaan ladata hyperlinkin kautta, tai dokumentin taustaksi.

Kuvien järkevä käyttö dokumentin sisällössä (liikkuvat tai animoidut ikonit, valokuvat, selitykset, maalaukset jne.) tekee dokumentista elävämmän ja kiinnostavamman, ja se näyttää myös ammattimaisemmalta, tarjoaa enemmän tietoa ja on helppokäyttöinen.

Kuitenkin, jos kuvia käytetään liikaa, dokumentti voi tuntua hajanaiselta, sekavalta ja vaikeasti luettavalta, ja käyttäjien odotusajat ladataessa ja tarkastellessa tätä sivua kasvavat huomattavasti.

Lue seuraava artikkeli ja oppi internetin kaksi tärkeintä kuvamuotoa: GIF ja JPEG, sekä kuinka käyttää kuvia oikein:

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <img> Elementti:

img {
  display: inline-block;
}

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki