HTML ļauj izmantot attēlus tīmekļa lapās un padarīt tos pievilcīgākus, piemērojot dažādus stilus. Ja jums ir jāmaina attēla malu attiecība vai attēls neatbilst jūsu tīmekļa lapas izkārtojumam, varat mainīt tā izmēru. Šim nolūkam varat izmantot ' platums ' un ' augstums ' rekvizīti vietnē ' img ” tagu. Šīs rekvizītu vērtības var viegli iestatīt CSS pikseļos.

Šajā rokasgrāmatā jūs uzzināsit, kā mainīt attēla izmēru HTML formātā.

Pirms darba sākšanas ir jāpievieno attēls HTML failam, kurā tiks veikta attēla izmēra maiņas darbība.

Kā iegult attēlu HTML?

Lai pievienotu attēlu HTML, izmantojiet šādu sintaksi:

Iepriekš minētās sintakses apraksts ir aprakstīts zemāk. ' img ” tags izmanto divus atribūtus:

• • 'src' tiek izmantots, lai norādītu attēla ceļu (URL).
  • 'viss' tiek izmantots, lai nodrošinātu alternatīvo tekstu, ja attēls netiek rādīts.

HTML

Tālāk norādītais kods apzīmē divus div. Pirmajā daļā mēs pievienojām virsrakstu mūsu tīmekļa lapas augšējā centrā kā ' Attēla lielums HTML formātā ”, izmantojot tagu

:

< div >
< centrs >
< h1 > Attēla izmērs iekšā HTML h1 >
centrs >
div >

Otrais dalījums tiek pievienots ar klasi ar nosaukumu “ konteiners ” un, lai attēlotu attēlu centrā, esam izmantojuši tagu

. Centrā ierakstiet tālāk minēto kodu, lai pievienotu attēlu:

< div klasē = 'konteiners' >
< centrs >
< img src = 'images/butterfly.jpg' viss = 'alternatīvais teksts' >
centrs >
div >

Atlasītais attēls ar “ 640*437 ” malu attiecība izskatīsies šādi:

Nākamajā sadaļā tiks parādīta metode, kā mainīt attēla izmēru.

Kā mainīt attēla izmērus HTML?

Varat pielāgot attēla izmēru vai mainīt tā izmēru, izmantojot ' platums ' un ' augstums ” atribūtus, lai iestatītu tā platumu un augstumu.

Tagad iestatīsim pievienotā attēla platuma vērtību kā ' 300 ” un skatiet, kā tas darbojas:

< img src = 'images/butterfly.jpg' viss = 'alternatīvais teksts' platums = '300' >

Redzams, ka attēla platums ir mainīts un tā izmērs ir veiksmīgi mainīts:

Papildus platumam ' augstums ” atribūtu var izmantot arī šim pašam mērķim. Lai redzētu izmēru atšķirību, iestatiet “ 550 ” pikseļi kā attēla augstums:

< img src = 'images/butterfly.jpg' viss = 'alternatīvais teksts' platums = '300' augstums = '550' >

Jūs varat skaidri novērot attēla izmēra atšķirību:

Tādā veidā platuma un augstuma atribūti tiek izmantoti, lai mainītu attēla izmēru.

Secinājums

HTML valodā “ augstums ' un ' platums ” atribūti tiek izmantoti attēla izmēra maiņai. Varat mainīt pievienotā attēla noklusējuma malu attiecību, iestatot šo atribūtu vērtības. Rezultātā var redzēt skaidru atšķirību attiecībā uz attēla izmēru. Šajā emuārā ir parādīta metode, kā izmantot augstuma un svara rekvizītus attēlu izmēru maiņai HTML.