Ridimensionamento HTML IMG

Quando un'immagine viene aggiunta a un documento HTML, deve essere adeguatamente regolata per mantenere una migliore rappresentazione visiva dell'interfaccia. Più specificamente, HTML "img"Il ridimensionamento significa regolare l'immagine rispetto a parametri diversi come"altezza" E "larghezza"Per ridimensionare l'immagine. Senza ridimensionamento o ridimensionamento, la dimensione originale dell'immagine verrà visualizzata come dimensione predefinita nell'output. Per ridimensionare le immagini HTML, le proprietà CSS "altezza" e "larghezza" sono utilizzate in modi diversi.

Questo post coprirà i seguenti approcci:

• Metodo 1: ridimensionamento di un'immagine usando i valori percentuali
• Metodo 2: ridimensionamento di un'immagine usando i valori dei pixel

Metodo 1: ridimensionamento di un'immagine usando i valori percentuali

Gli sviluppatori possono applicare il CSS "altezza" E "larghezza"Proprietà su HTML""Elemento e definire un numero qualsiasi di percentuali nell'elemento in stile CSS per impostare la lunghezza orizzontale e verticale dell'immagine di conseguenza.

Esempio
Dai un'occhiata a un esempio di ridimensionamento o ridimensionamento dell'immagine usando le proprietà CSS. Supponiamo che abbiamo il seguente contenitore, su cui devono essere applicate le proprietà CSS:

Nel suddetto snippet del codice HTML:

• UN "div"L'elemento container è stato aggiunto con la classe dichiarata come"containerimage".
• All'interno del tag "div", c'è il "imgTag con il "id"Dichiarato come"myid" e il "src"Attributo.
• L'indirizzo dell'immagine esatto del sistema è stato aggiunto come valore di "src"Attributo. Ciò aggiungerà l'immagine selezionata dal sistema nel contenitore Div nell'output.

Ora, è necessario applicare le proprietà CSS sull'elemento HTML sopra per ridimensionare l'immagine aggiunta:

#myid
larghezza: 50%;
Altezza: 40%;

Nell'elemento in stile CSS sopra:

• IL "id"Dichiarato nel"img"L'elemento viene aggiunto per fare riferimento a""Elemento.
• All'interno del div, il "larghezzaLa proprietà "è definita come"50%". Ciò regola la larghezza dell'immagine sullo schermo per coprire la metà dell'area orizzontale dello schermo.
• Dopodiché, il "altezzaLa proprietà "è stata impostata su"40%"Per coprire l'area" 40%"dell'intero schermo verticale nell'uscita.

Questo genererà la seguente interfaccia di output:

Metodo 2: ridimensionamento di un'immagine usando i valori dei pixel

Quando il CSS ridimensionò le proprietà, io.e., "altezza" E "larghezza"Vengono applicati definendo i valori per loro nei pixel, ridimensiona l'immagine nell'output in base al valore esatto dei pixel piuttosto che regolare le dimensioni dell'immagine in base all'intera area dello schermo.

Esempio
Applichiamo il CSS "altezza" E "larghezza"Proprietà definendo i loro valori in"Px"(Pixel) esattamente allo stesso frammento HTML aggiunto nella sezione precedente di questo post:

#myid
Altezza: 250px;
larghezza: 550px;

Nel suddetto frammento di codice CSS:

• IL "altezzaLa proprietà "è stata impostata su"250px". Questo imposterà l'altezza dell'immagine su esattamente 250 pixel.
• IL "larghezzaLa proprietà "è stata impostata su"550px"Per impostare la larghezza su esattamente 550 pixel nell'uscita.

Secondo il codice sopra, l'immagine aggiunta verrà ridimensionata come segue:

Ecco come ridimensionare un'immagine in HTML.

Conclusione

Le immagini possono essere ridimensionate o ridimensionate in un documento HTML utilizzando il CSS "altezza" E "larghezza" proprietà. Per utilizzarli, dichiarare un "id"O un"classe"Per l'HTML""Elemento, aggiungi il rispettivo selettore nell'elemento in stile CSS e definisci le proprietà di altezza e larghezza CSS per l'elemento" ". L '"altezza" e "larghezza" possono essere definiti aggiungendo valori in percentuale o pixel. Questo blog ha discusso degli approcci per il ridimensionamento delle immagini in HTML.