In HTML/CSS, un utente può aggiungere un'immagine, video o collegamenti a un sito Web. Tuttavia, a volte gli utenti hanno difficoltà a ridimensionare l'immagine o regolare la dimensione dell'immagine senza allungarla. A tale scopo, CSS consente ai suoi utenti di utilizzare varie proprietà, come "Object-Fit"Proprietà CSS. Questa proprietà può riempire la dimensione dell'immagine senza allungamento.

Questo post spiegherà:

• Come aggiungere un'immagine in HTML?
• Come riempire la dimensione dell'immagine CSS senza allungamento?

Come inserire un'immagine in HTML?

Le immagini nella pagina HTML possono essere allegate in così tanti modi. Comunque, il ""Il tag è uno degli elementi principalmente utilizzati per incorporare le immagini.

Se l'utente desidera aggiungere un'immagine alla pagina HTML, consultare le istruzioni fornite.

Passaggio 1: aggiungi l'intestazione

Innanzitutto, aggiungi un intestazione usando "

"Tag. Quindi, aggiungi il testo tra il tag di intestazione specificato.

Passaggio 2: aggiungi l'immagine

Successivamente, inserire un “"Tag insieme ai seguenti attributi:

• IL "classe"L'attributo viene utilizzato per accedere all'elemento per nome della classe.
• IL "src"L'attributo viene utilizzato per l'aggiunta del percorso dell'immagine o dell'URL.
• "larghezza"Specifica la dimensione dell'immagine in orizzontale.
• "altezza"Assegna l'altezza dell'immagine:

Aggiungi immagine

L'output mostra che l'immagine è stata aggiunta correttamente:

Come riempire la dimensione dell'immagine CSS senza allungamento?

Per riempire la dimensione dell'immagine CSS senza allungarla, prova le istruzioni fornite.

Innanzitutto, accedi al ""Elemento usando".copertina"E applica le seguenti proprietà CSS:

.copertina
Object-Fit: copertura;
larghezza: 50px;
Margine: 20px;
Altezza: 100px;

La descrizione del codice sopra menzionato è la seguente:

• IL "Object-Fit"La proprietà viene utilizzata per specificare come ridimensionare l'immagine per adattarsi al suo contenitore. Ad esempio, abbiamo impostato il suo valore come "copertina".
• "larghezza"Specifica la dimensione della larghezza dell'immagine.
• "margine"Assegna lo spazio attorno al confine di un elemento.
• "altezza"Definisce l'altezza dell'immagine in un contenitore.

Si può osservare che l'immagine è stata ridimensionata e riempita senza allungamento:

Si trattava di riempire l'immagine senza allungare.

Conclusione

Per riempire la dimensione dell'immagine senza allungamento, prima, aggiungi un'immagine con l'aiuto di ""Tag insieme all'attributo di classe. Quindi, accedi all'immagine utilizzando il nome della classe e applica il “Object-Fit"Proprietà CSS come"copertina". Inoltre, applicare altre proprietà CSS per lo stile, come "larghezza","altezza", E "margine". Questo post ha dimostrato il metodo per ridimensionare e riempire l'immagine senza allungamento.