In HTML, possiamo modificare la dimensione di qualsiasi immagine utilizzando i seguenti modi diversi:
- Utilizzando il tag HTML
- Utilizzando un attributo di stile in linea
- Utilizzando CSS interni
Utilizzando il tag HTML
Nota: HTML 5 non supporta gli attributi altezza e larghezza di ![]()
, quindi dobbiamo utilizzare l'attributo di stile in linea e le opzioni CSS interne per modificare l'immagine o la dimensione dell'immagine.
Se vogliamo modificare la dimensione di un'immagine nel documento utilizzando Etichetta HTML che deve essere visualizzato su una pagina web, dobbiamo seguire i passaggi indicati di seguito. Utilizzando questi passaggi, possiamo facilmente modificare la dimensione dell'immagine:
Passo 1: Per prima cosa dobbiamo digitare il codice Html in un qualsiasi editor di testo oppure aprire il file Html esistente nell'editor di testo in cui vogliamo modificare la dimensione di un'immagine.
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>
Passo 2: Ora posiziona il cursore all'interno del tag img. E poi, dobbiamo utilizzare gli attributi altezza e larghezza del tag img per modificare la dimensione di un'immagine. Quindi, dobbiamo digitare questi attributi:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Passaggio 3: E alla fine dobbiamo salvare il file Html e poi eseguirlo.
javascript più vicino
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>Provalo adesso
L'output del codice Html sopra è mostrato nella seguente schermata:
Utilizzando un attributo di stile in linea
Se vogliamo modificare la dimensione di un'immagine utilizzando un attributo di stile in linea che deve essere visualizzato su una pagina web, dobbiamo seguire i passaggi indicati di seguito. Utilizzando questi passaggi, possiamo facilmente modificare le dimensioni dell'immagine.
Passo 1: Per prima cosa dobbiamo digitare il codice Html in un qualsiasi editor di testo oppure aprire il file Html esistente nell'editor di testo in cui vogliamo utilizzare l'attributo style per modificare la dimensione di un'immagine.
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>
Passo 2: Ora posiziona il cursore all'interno di tag img di quell'immagine di cui vogliamo cambiare le dimensioni. E poi, dobbiamo digitare l'attributo style subito dopo l'attributo src . Quindi, dobbiamo digitare le proprietà larghezza e altezza nell'attributo style come mostrato nel blocco seguente:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Passaggio 3: E alla fine dobbiamo salvare il file Html e poi eseguirlo.
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>Provalo adesso
L'output del codice HTML sopra è mostrato nella seguente schermata:
Utilizzando CSS interni
Se vogliamo modificare la dimensione di un'immagine o di un'immagine utilizzando un foglio di stile a cascata interno che deve essere visualizzato su una pagina web, dobbiamo seguire i passaggi indicati di seguito. Utilizzando questi passaggi, possiamo facilmente modificare la dimensione di qualsiasi immagine.
Passo 1: Per prima cosa dobbiamo digitare il codice Html in un qualsiasi editor di testo oppure aprire il file Html esistente nell'editor di testo in cui vogliamo utilizzare il CSS interno per modificare la dimensione di un'immagine.
css che modifica la dimensione dell'immagine
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>
Passo 2: Ora dobbiamo posizionare il cursore nel tag head del documento Html e quindi definire gli stili all'interno del file tag come mostrato nel blocco seguente. E quindi digitare il larghezza e altezza attributo nel selettore id.
#imagesize { width:100px; height:100px; } Passaggio 3: Ora dobbiamo digitare l'id nel tag img dell'immagine di cui vogliamo modificare le dimensioni:
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> Provalo adesso Passaggio 5: Ora dobbiamo salvare il file Html e quindi eseguire il file. Lo screenshot seguente mostra l'output del codice Html sopra:
