Come ritagliare un'immagine usando CSS

Questo articolo discuterà:

• Metodo 1: come ritagliare un'immagine attraverso la proprietà "Overflow: Hidden"?
• Metodo 2: come ritagliare un'immagine attraverso la proprietà "Immagina di background"?
• Metodo 3: come ritagliare un'immagine attraverso le proprietà di "posizione oggetto" e "oggetto-fit"?

Prerequisito: creazione di un file HTML

Per incorporare un'immagine nel documento HTML, seguire le istruzioni menzionate:

• Aggiungere un ""Tag per creare una divisione e assegnarla una classe"img-crop-div". Implementa il "stile"Attributo per impostare l'elemento"margine" proprietà.
• Quindi, utilizza il tag HTML con gli attributi "SRC", "larghezza" e "altezza" per incorporare un'immagine nel documento.
• IL "src"Attributo imposta l'URL di origine.
• IL "larghezza"Definisce la larghezza dell'immagine.
• IL "altezza"Determina l'altezza dell'immagine.

Html

Si può osservare che abbiamo aggiunto correttamente l'immagine alla nostra pagina web:

Metodo 1: come ritagliare un'immagine attraverso la proprietà "Overflow: Hidden"?

Quando il contenuto dell'elemento è troppo grande per adattarsi all'area designata, il "overflow"La proprietà è definita per aggiungere barre di scorrimento. Inoltre, può anche essere utilizzato per ritagliare l'immagine aggiunta.

Per una migliore comprensione, modelliamo il nostro contenitore.

Classe "IMG-CROP-DIV"

IL ".img-crop-div"È definito per accedere alla classe"img-crop-div". IL "altezza" E "larghezza"Le proprietà CSS sono utilizzate per allocare l'area dell'immagine. Quindi, l'area rimanente viene tagliata usando il "overflow"Proprietà CSS insieme al valore"nascosto".

Produzione

Regola la posizione dell'immagine ritagliata

Ora vedremo come regolare la posizione dell'immagine:

Utilizzando il "margine"Proprietà con i valori specificati per la parte superiore, destra, sinistra e in basso ci hanno aiutato a regolare la posizione.

Produzione

Metodo 2: come ritagliare un'immagine attraverso la proprietà "Immagina di background"?

IL "immagine di sfondo"La proprietà CSS viene utilizzata per specificare le immagini di sfondo. Tuttavia, un'immagine può essere ritagliata usando questa proprietà. Per fare ciò, prima, impostare la larghezza e l'altezza del contenente un'immagine. Di conseguenza, l'immagine verrà mostrata all'interno dell'area specificata.

Implettiamo lo scenario sopra discusso in CSS:

Qui, il "posizione in background"La proprietà viene utilizzata per regolare la posizione iniziale dell'immagine.

Produzione

Come ritagliare un'immagine attraverso proprietà "oggetto-fit" e "posizione oggetto"?

CSS "Object-Fit"La proprietà può essere specificata per ritagliare le immagini facilmente. Ha cinque valori, ma il "copertina"È il più appropriato da utilizzare per le immagini di ritaglio.

In CSS, aggiungi il seguente frammento di codice per "img-crop-div" classe:

Ecco la descrizione delle proprietà fornite:

• Usando il "Object-Fit: copertura"Valore della proprietà, il rapporto Aspect dell'immagine viene mantenuto mentre si inserisce ancora nella scatola del contenitore.
• IL "posizione oggetto"La proprietà imposta l'area dell'immagine su.

Produzione

Abbiamo compilato i metodi per ritagliare un'immagine usando CSS.

Conclusione

Per ritagliare un'immagine in HTML, è possibile utilizzare diverse proprietà CSS. Le proprietà più comunemente usate per le immagini delle colture sono "overflow" con "larghezza" E "altezza","immagine di sfondo","Object-Fit", E "posizione oggetto". Questo post ha descritto più metodi per ritagliare un'immagine usando CSS.