Come ridimensionare l'immagine in CSS

Durante lo sviluppo di un sito Web, utilizziamo spesso le immagini scaricate da Internet. Tuttavia, esiste la possibilità che l'immagine scaricata non sia nella dimensione corretta. In tale situazione, la soluzione ideale è ridimensionare l'immagine desiderata.

Esistono vari modi per ridimensionare un'immagine; Scegli CSS quando si tratta di trovare il modo più rapido ed efficiente. CSS offre proprietà diverse che possono essere utilizzate per ridimensionare le immagini in base alle tue preferenze.

Questo articolo dimostrerà i metodi per ridimensionare le immagini usando CSS.

Come ridimensionare un'immagine in CSS?

In CSS, è possibile utilizzare le seguenti proprietà per ridimensionare un'immagine:

• proprietà di altezza e larghezza
• Proprietà a fit oggetto
• Proprietà delle dimensioni di un background

Esamineremo ciascuno dei metodi menzionati uno per uno!

Metodo 1: utilizzare le proprietà di altezza e larghezza per ridimensionare l'immagine in CSS

In CSS, la proprietà di altezza viene utilizzata per regolare l'altezza degli elementi HTML. Allo stesso modo, la proprietà di larghezza è abbastanza utile per la regolazione della larghezza degli elementi.

Se sei disposto solo a cambiare il "altezza"Dell'immagine, quindi controlla la seguente sintassi:

Altezza: 85%;

Qui, "85%"Rappresenta il valore della proprietà di altezza.

Tuttavia, per cambiare l'immagine "larghezza", Imposta il suo valore in base alle tue preferenze:

larghezza: 85%;

Nota: Usando il "auto"Poiché il valore delle proprietà di altezza e larghezza aiuterà a mantenere la reattività dell'immagine rispetto a diversi dispositivi.

Tuttavia, a volte, è necessario ridimensionare l'immagine orizzontale e verticalmente. Se è così, è possibile assegnare un valore specifico alle proprietà di altezza e larghezza.

Esempio

In questo esempio, ridimensioneremo la seguente immagine:

Ora, per ridimensionare l'immagine data, imposteremo il valore della proprietà di altezza come "55%"E larghezza come"70%"Nel file CSS:

Specificare la fonte dell'immagine "src" nel ""Tag del file HTML:

Abbiamo ridimensionato con successo l'immagine usando le proprietà menzionate.

Metodo 2: utilizzare la proprietà oggetto-fit per ridimensionare l'immagine in CSS

In CSS, il “Object-Fit"La proprietà viene utilizzata per regolare automaticamente un'immagine sul suo contenitore. Usando questa proprietà, possiamo adattarci a un'immagine nel contenitore con i valori arruolati:

• riempire: Se l'immagine è allungata rispetto al contenitore, può essere ridimensionata per adattarsi al contenitore.
• contenere: Utilizzando questo valore di proprietà, l'immagine selezionata mantiene il suo rapporto di aspetto; Tuttavia, è ridimensionato per adattarsi al contenitore.
• copertina: Consente all'immagine di coprire l'intero contenitore.
• nessuno: La dimensione dell'immagine rimane la stessa.
• rimpicciolire: Quando il valore della proprietà oggetto-fit è impostato come scala di scala, verifica se l'immagine dovrebbe rimanere delle stesse dimensioni o essere ridimensionata per adattarsi al contenitore.

Esempio

Utilizzeremo la stessa immagine e imposteremo il suo valore di proprietà dell'oggetto come "contenere". Di conseguenza, l'immagine selezionata manterrà il suo proporzione ma viene ridimensionata per adattarsi allo stesso contenitore:

Immagine montata correttamente all'interno del contenitore. Tuttavia, è possibile utilizzare la copertura, il riempimento o la scala per ottenere la dimensione dell'immagine desiderata:

Metodo 3: utilizzare la proprietà in background per ridimensionare l'immagine in CSS

Per ridimensionare un'immagine di sfondo in CSS, puoi semplicemente usare "Size di sfondo" proprietà. Questa proprietà è ideale per la regolazione delle immagini di sfondo.

Prima di saltare più a fondo, dai un'occhiata alla descrizione dei suoi diversi valori:

• auto(Valore predefinito): impostando la proprietà di dimensioni in background come "auto", L'immagine rimarrà nella sua dimensione originale.
• copertina: Questo valore costringe l'immagine a coprire l'intero contenitore se c'è spazio.
• contenere: Per assicurarsi che l'immagine sia completamente visibile, usa "contenere"Come valore della proprietà di dimensioni di fondo.

Esempio

Ora ridimensioneremo il "Immagine.png"Impostando il valore della sua proprietà in background come"contenere". Inoltre, per evitare la ripetizione dell'immagine, useremo il "Ripeat di sfondo"Proprietà e impostare il suo valore su"no-ripeat". Inoltre, "250px"L'imbottitura è necessaria per accumulare il contenuto all'interno del contenitore.

Qui, l'esempio è un "id"Del"div"Container:

Successivamente, assegnare il “esempio"Id al e aggiungi un po 'di testo usando

etichetta:

TESTO

Il valore specificato della proprietà di dimensioni di sfondo renderà l'immagine completamente visibile. Tuttavia, puoi impostare qualsiasi valore in base alle tue preferenze:

Abbiamo fornito le istruzioni necessarie relative al ridimensionamento di un'immagine in CSS.

Conclusione

Per ridimensionare l'immagine usando CSS, è possibile utilizzare la proprietà altezza o larghezza. La proprietà CSS Object-Fit può anche aiutare a montare un'immagine rispetto al suo contenitore. L'uso della proprietà Object-Fit ti aiuterà a eseguire automaticamente l'immagine. Inoltre, la proprietà delle dimensioni di un background può anche essere utilizzata per lo scopo menzionato. Questo articolo ha descritto i due metodi efficienti per ridimensionare un'immagine in CSS.