logo

Com canviar la mida de la imatge en HTML

En HTML, podem canviar la mida de qualsevol imatge utilitzant les següents maneres diferents:

  1. Utilitzant l'etiqueta HTML
  2. Utilitzant un atribut d'estil en línia
  3. Utilitzant CSS intern

Utilitzant l'etiqueta HTML

Nota: HTML 5 no admet l'atribut d'alçada i amplada de , per tant, hem d'utilitzar l'atribut d'estil en línia i les opcions CSS internes per canviar la mida de la imatge o la imatge.

Si volem canviar la mida d'una imatge del document utilitzant Etiqueta HTML que s'ha de mostrar en una pàgina web, hem de seguir els passos que es detallen a continuació. Amb aquests passos, podem canviar fàcilment la mida de la imatge:

Pas 1: En primer lloc, hem d'escriure el codi HTML en qualsevol editor de text o obrir el fitxer HTML existent a l'editor de text en el qual volem canviar la mida d'una imatge.

 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> 

Pas 2: Ara, col·loqueu el cursor dins de l'etiqueta img. I després, hem d'utilitzar l'atribut d'alçada i amplada de l'etiqueta img per canviar la mida d'una imatge. Per tant, hem d'escriure aquests atributs:

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

Pas 3: I, per fi, hem de desar el fitxer HTML i després executar-lo.

punter de desreferència c
 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> 
Prova-ho ara

La sortida del codi HTML anterior es mostra a la captura de pantalla següent:

Com canviar la mida de la imatge en HTML

Utilitzant un atribut d'estil en línia

Si volem canviar la mida d'una imatge mitjançant un atribut d'estil en línia que s'ha de mostrar en una pàgina web, hem de seguir els passos que es detallen a continuació. Amb aquests passos, podem canviar fàcilment la mida de la imatge.

Pas 1: En primer lloc, hem d'escriure el codi HTML en qualsevol editor de text o obrir el fitxer HTML existent a l'editor de text en el qual volem utilitzar l'atribut style per canviar la mida d'una imatge.

 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> 

Pas 2: Ara, col·loca el cursor dins de etiqueta img d'aquesta imatge la mida de la qual volem canviar. I després, hem d'escriure l'atribut style just després de l'atribut src . A continuació, hem d'escriure la propietat d'amplada i altura a l'atribut style igual que es mostra al bloc següent:

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

Pas 3: I per fi hem de desar el fitxer Html i després executar-lo.

 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> 
Prova-ho ara

La sortida del codi HTML anterior es mostra a la captura de pantalla següent:

Com canviar la mida de la imatge en HTML

Utilitzant CSS intern

Si volem canviar la mida d'una imatge o imatge mitjançant un full d'estil en cascada intern que s'ha de mostrar en una pàgina web, hem de seguir els passos que es detallen a continuació. Amb aquests passos, podem canviar fàcilment la mida de qualsevol imatge.

Pas 1: En primer lloc, hem d'escriure el codi HTML en qualsevol editor de text o obrir el fitxer HTML existent a l'editor de text en el qual volem utilitzar el CSS intern per canviar la mida d'una imatge.

retorn de matrius en java
 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> 

Pas 2: Ara, hem de col·locar el cursor a l'etiqueta head del document HTML i després definir els estils dins del etiqueta tal com es mostra al bloc següent. I després escriviu el amplada i alçada atribut al selector d'identificació.

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

Pas 3: Ara, hem d'escriure l'identificador a l'etiqueta img d'aquesta imatge la mida de la qual volem canviar:

 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> 
Prova-ho ara

Pas 5: Ara, hem de desar el fitxer HTML i després executar-lo. La captura de pantalla següent mostra la sortida del codi HTML anterior:

Com canviar la mida de la imatge en HTML