HTML ci consente di utilizzare le immagini nelle pagine Web e renderle più attraenti applicando stili diversi. Se è necessario modificare le proporzioni dell'immagine o l'immagine non si adatta al layout della pagina web, puoi ridimensionarlo. A tale scopo, puoi utilizzare il "larghezza" E "altezza"Proprietà sul"img"Tag. Questi valori di proprietà possono essere facilmente impostati nei 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:

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.
  • "Alt" 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 al centro superiore della nostra pagina web come "Dimensione dell'immagine in HTML"Usando il

etichetta:

Dimensione dell'immagine in HTML

Il secondo div viene aggiunto con la classe chiamata "contenitore"E per rappresentare l'immagine al centro, abbiamo usato il tag. All'interno del centro, scrivere il codice di seguito per aggiungere un'immagine:

L'immagine selezionata con “640*437"Le proporzioni saranno così:

La prossima sezione dimostrerà il metodo per ridimensionare un'immagine.

Come ridimensionare l'immagine in HTML?

Puoi personalizzare le dimensioni dell'immagine o ridimensionarla usando "larghezza" E "altezza"Attributi per impostare la sua larghezza e altezza.

Ora, impostiamo il valore di larghezza dell'immagine aggiunta come "300"E guarda come funziona:

Si può vedere che la larghezza dell'immagine è stata cambiata ed è ridimensionata con successo:

Oltre alla larghezza, il "altezza"L'attributo può anche essere utilizzato per lo stesso scopo. Per visualizzare la differenza di dimensioni, imposta "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 sono utilizzati per ridimensionare l'immagine. È possibile modificare il rapporto di aspetto predefinito dell'immagine aggiunta impostando i valori di questi attributi. Di conseguenza, si può vedere una chiara differenza rispetto alla dimensione dell'immagine. Questo blog ha dimostrato il metodo per utilizzare le proprietà di altezza e peso per ridimensionare le immagini in HTML.