logo

Cum se schimbă dimensiunea imaginii în HTML

În HTML, putem schimba dimensiunea oricărei imagini utilizând următoarele moduri diferite:

  1. Folosind eticheta HTML
  2. Folosind un atribut de stil Inline
  3. Folosind CSS intern

Folosind eticheta HTML

Notă: HTML 5 nu acceptă atributele înălțime și lățime ale , așa că trebuie să folosim atributul de stil inline și opțiunile CSS interne pentru a schimba dimensiunea imaginii sau a imaginii.

Dacă vrem să schimbăm dimensiunea unei imagini din document folosind Etichetă HTML care urmează să fie afișat pe o pagină web, trebuie să urmam pașii care sunt dați mai jos. Utilizând acești pași, putem schimba cu ușurință dimensiunea imaginii:

Pasul 1: În primul rând, trebuie să introducem codul HTML în orice editor de text sau să deschidem fișierul HTML existent în editorul de text în care dorim să schimbăm dimensiunea unei imagini.

 Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 

Pasul 2: Acum, plasați cursorul în interiorul etichetei img. Și apoi, trebuie să folosim atributul înălțime și lățime al etichetei img pentru a schimba dimensiunea unei imagini. Deci, trebuie să introducem aceste atribute:

 <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> 

Pasul 3: Și, în sfârșit, trebuie să salvăm fișierul Html și apoi să îl rulăm.

tupluri java
 Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 
Testează-l acum

Ieșirea codului HTML de mai sus este afișată în următoarea captură de ecran:

Cum se schimbă dimensiunea imaginii în HTML

Folosind un atribut Inline Style

Dacă dorim să schimbăm dimensiunea unei imagini folosind un atribut de stil inline care urmează să fie afișat pe o pagină web, trebuie să urmam pașii care sunt dați mai jos. Utilizând acești pași, putem schimba cu ușurință dimensiunea imaginii.

Pasul 1: În primul rând, trebuie să introducem codul HTML în orice editor de text sau să deschidem fișierul HTML existent în editorul de text în care dorim să folosim atributul de stil pentru modificarea dimensiunii unei imagini.

 Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 

Pasul 2: Acum, plasați cursorul în interiorul etichetă img a acelei imagini a cărei dimensiune dorim să o schimbăm. Și apoi, trebuie să introducem atributul de stil imediat după atributul src . Și apoi, trebuie să introducem proprietatea lățime și înălțime în atributul stil la fel ca în următorul bloc:

 <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 

Pasul 3: Și în cele din urmă trebuie să salvăm fișierul Html și apoi să îl rulăm.

 Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 
Testează-l acum

Ieșirea codului HTML de mai sus este afișată în următoarea captură de ecran:

Cum se schimbă dimensiunea imaginii în HTML

Folosind CSS intern

Dacă dorim să schimbăm dimensiunea unei imagini sau imagini folosind o foaie de stil internă în cascadă care urmează să fie afișată pe o pagină web, trebuie să urmam pașii care sunt dați mai jos. Utilizând acești pași, putem schimba cu ușurință dimensiunea oricărei imagini.

Pasul 1: În primul rând, trebuie să introducem codul Html în orice editor de text sau să deschidem fișierul HTML existent în editorul de text în care dorim să folosim CSS-ul intern pentru modificarea dimensiunii unei imagini.

beneficiile instagramului pentru uz personal
 Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br> 

Pasul 2: Acum, trebuie să plasăm cursorul în eticheta head a documentului HTML și apoi să definim stilurile din interiorul eticheta așa cum se arată în blocul următor. Și apoi tastați latime si inaltime atribut în selectorul de id.

 #imagesize { width:100px; height:100px; } 

Pasul 3: Acum, trebuie să introducem id-ul în eticheta img a acelei imagini a cărei dimensiune dorim să o modificăm:

 Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> 
Testează-l acum

Pasul 5: Acum, trebuie să salvăm fișierul Html și apoi să rulăm fișierul. Următoarea captură de ecran arată rezultatul codului HTML de mai sus:

Cum se schimbă dimensiunea imaginii în HTML