HTML Regola la dimensione dell'immagine
Cosa intendiamo regolando la dimensione dell'immagine in HTML?
La dimensione di un'immagine è una combinazione della sua altezza e larghezza. Ad esempio, se abbiamo un'immagine di dimensioni 100 x 100, allora significherà che la suddetta immagine avrà un'altezza e una larghezza di 100 pixel. Regolando le dimensioni di un'immagine in HTML, intendiamo letteralmente cambiare l'altezza e la larghezza di quell'immagine in base ai nostri requisiti. Inoltre, non è obbligatorio per un'immagine avere la stessa larghezza e altezza. In altre parole, è perfettamente normale che un'immagine abbia un'altezza e una larghezza diverse. Ora, apprendiamo i metodi per regolare le dimensioni di un'immagine in HTML.
Come regolare la dimensione dell'immagine in HTML?
È possibile regolare facilmente le dimensioni di una qualsiasi delle immagini desiderate in HTML seguendo uno dei due metodi spiegati di seguito. Tuttavia, prima di andare avanti con questi metodi, vorremmo mostrarti l'immagine di cui desideriamo adattarci usando questi metodi. Questa immagine è la seguente:
La dimensione originale di questa immagine è 900 x 900, i.e., L'altezza, così come la larghezza di questa immagine, è di 900 pixel, come evidenziato nell'immagine qui sotto:
Metodo n. 1: utilizzando le proprietà semplici di altezza e larghezza di HTML
In questo metodo, utilizzeremo le proprietà semplici di altezza e larghezza di HTML per regolare le dimensioni della nostra immagine specificata. Puoi assegnare qualsiasi valore di tua scelta a queste proprietà. Lo script HTML per questo metodo è il seguente:
In questo metodo, il nostro obiettivo principale è sulla regolazione della dimensione dell'immagine, per la quale abbiamo utilizzato l'attributo "IMG" di HTML. Questo attributo viene utilizzato ogni volta che si desidera giocare con le immagini in HTML. Quindi, abbiamo usato l'attributo "src", con l'aiuto di cui ci riferiamo al percorso esatto o alla posizione in cui risiede la nostra immagine target. Puoi vedere che dopo questo attributo, abbiamo menzionato il percorso completo della nostra immagine desiderata. Quindi, abbiamo l'attributo "alt", che è lì per menzionare qualsiasi testo alternativo per descrivere l'immagine. È totalmente autorizzato a saltare questo attributo. Questo è seguito dalle proprietà "larghezza" e "altezza" di HTML. Abbiamo mantenuto i valori di entrambe queste proprietà come "400". Significa che questo script visualizzerà la nostra immagine target a dimensioni ridotte al momento dell'esecuzione.
La pagina Web mostrata nell'immagine seguente visualizza la nostra immagine in dimensione 400 x 400.
Metodo n. 2: usando l'attributo di stile di HTML
Questo è solo un metodo alternativo per regolare le dimensioni di un'immagine in HTML. Utilizza l'attributo in linea in linea di HTML. Per utilizzare questo metodo, dovrai dare un'occhiata al seguente script HTML:
Questo script HTML è praticamente simile a quello di cui abbiamo discusso sopra nel nostro primo metodo. Tuttavia, questa volta, invece di specificare semplicemente i valori delle proprietà HTML "altezza" e "larghezza", abbiamo usato l'attributo "stile", e quindi abbiamo racchiuso queste proprietà al suo interno. Questa volta, vogliamo cambiare le dimensioni della nostra immagine target a 600 x 600.
La nostra immagine specificata con la dimensione appena regolata è mostrata nell'immagine seguente:
Conclusione
Questo tutorial è stato progettato per guidare i metodi per regolare la dimensione dell'immagine in HTML. A questo proposito, abbiamo condiviso due diversi metodi con te che sono davvero facili da implementare. Dopo aver attraversato questi due metodi, non troverai difficile regolare le dimensioni delle tue immagini, io.e., Aumenta o diminuisci la dimensione dell'immagine in base ai requisiti mentre si lavora con HTML.