L'HTML ci consente di utilizzare le immagini nelle pagine Web e di renderle più accattivanti applicando stili diversi. Se è necessario modificare le proporzioni dell'immagine o l'immagine non si adatta al layout della pagina Web, è possibile ridimensionarla. A tale scopo è possibile utilizzare il “ larghezza ' e ' altezza ” proprietà sul “ img ” tag. Questi valori di proprietà possono essere facilmente impostati in pixel CSS.
In questo manuale imparerai il metodo per ridimensionare l'immagine in HTML.
Prima di iniziare, è necessario aggiungere l'immagine al file HTML su cui verrà eseguita l'operazione di ridimensionamento dell'immagine.
Come incorporare un'immagine in HTML?
Per aggiungere un'immagine in HTML, utilizzare la seguente sintassi:
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' >
La descrizione della sintassi sopra menzionata è descritta di seguito. Il ' img Il tag ” utilizza due attributi:
-
- 'src' viene utilizzato per fornire il percorso (URL) dell'immagine.
- 'Tutto quanto' viene utilizzato per fornire il testo alternativo se l'immagine non viene visualizzata.
HTML
Il codice seguente rappresenta due div. Nel primo div, abbiamo aggiunto un'intestazione in alto al centro della nostra pagina web come ' Dimensione dell'immagine in HTML ” utilizzando il tag
:
< div >
< centro >
< h1 > Dimensione dell'immagine in HTML h1 >
centro >
div >
Viene aggiunto il secondo div con la classe denominata “ contenitore ” e per rappresentare l'immagine al centro abbiamo utilizzato il tag
. All'interno del centro, scrivi il codice sotto indicato per aggiungere un'immagine:
< div classe = 'contenitore' >
< centro >
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' >
centro >
div >
L'immagine selezionata con “ 640*437 ' le proporzioni saranno simili a questa:
La prossima sezione mostrerà il metodo per ridimensionare un'immagine.
Come ridimensionare l'immagine in HTML?
Puoi personalizzare le dimensioni dell'immagine o ridimensionarla utilizzando ' larghezza ' e ' altezza ” per impostarne la larghezza e l'altezza.
Ora, impostiamo il valore della larghezza dell'immagine aggiunta come ' 300 ” e guarda come funziona:
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' larghezza = '300' >
Si può vedere che la larghezza dell'immagine è stata modificata e ridimensionata correttamente:
Oltre alla larghezza, il “ altezza L'attributo ” può essere utilizzato anche per lo stesso scopo. Per visualizzare la differenza di dimensioni, impostare ' 550 ” pixel come altezza dell'immagine:
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' larghezza = '300' altezza = '550' >
Puoi osservare chiaramente la differenza nella dimensione dell'immagine:
Ecco come vengono utilizzati gli attributi di larghezza e altezza per ridimensionare l'immagine.
Conclusione
In HTML, il ' altezza ' e ' larghezza Gli attributi ” vengono utilizzati per ridimensionare l'immagine. È possibile modificare le proporzioni predefinite dell'immagine aggiunta impostando i valori di questi attributi. Di conseguenza, è possibile notare una chiara differenza rispetto alle dimensioni dell'immagine. Questo blog ha dimostrato il metodo per utilizzare le proprietà di altezza e peso per ridimensionare le immagini in HTML.
Viene aggiunto il secondo div con la classe denominata “ contenitore ” e per rappresentare l'immagine al centro abbiamo utilizzato il tag
< centro >
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' >
centro >
div >
L'immagine selezionata con “ 640*437 ' le proporzioni saranno simili a questa:
La prossima sezione mostrerà il metodo per ridimensionare un'immagine.
Come ridimensionare l'immagine in HTML?
Puoi personalizzare le dimensioni dell'immagine o ridimensionarla utilizzando ' larghezza ' e ' altezza ” per impostarne la larghezza e l'altezza.
Ora, impostiamo il valore della larghezza dell'immagine aggiunta come ' 300 ” e guarda come funziona:
< img src = 'immagini/farfalla.jpg' Tutto quanto = 'testo alternato' larghezza = '300' >
Si può vedere che la larghezza dell'immagine è stata modificata e ridimensionata correttamente:
Oltre alla larghezza, il “ altezza L'attributo ” può essere utilizzato anche per lo stesso scopo. Per visualizzare la differenza di dimensioni, impostare ' 550 ” pixel come altezza dell'immagine:
Puoi osservare chiaramente la differenza nella dimensione dell'immagine:
Ecco come vengono utilizzati gli attributi di larghezza e altezza per ridimensionare l'immagine.
Conclusione
In HTML, il ' altezza ' e ' larghezza Gli attributi ” vengono utilizzati per ridimensionare l'immagine. È possibile modificare le proporzioni predefinite dell'immagine aggiunta impostando i valori di questi attributi. Di conseguenza, è possibile notare una chiara differenza rispetto alle dimensioni dell'immagine. Questo blog ha dimostrato il metodo per utilizzare le proprietà di altezza e peso per ridimensionare le immagini in HTML.