Object-fit immagini WordPress CSS senza modifiche

Il CSS object-fit consente di ridimensionare e ritagliare le immagini WordPress direttamente nella pagina, senza alterare i file originali caricati nella Libreria Media. La proprietà è utile per uniformare miniature, immagini in evidenza, card e gallerie con proporzioni diverse. Con object-fit: cover l’immagine riempie il contenitore e le parti eccedenti vengono nascoste, mentre contain mostra l’intero contenuto. La soluzione funziona nei temi WordPress moderni e può essere applicata a una singola immagine tramite una classe CSS personalizzata. Per ottenere un risultato prevedibile è necessario definire una larghezza, un’altezza oppure un rapporto dimensionale per l’immagine o per il suo contenitore. Il file originale, l’URL dell’immagine e le versioni generate da WordPress restano invariati.

Come funziona object-fit sulle immagini WordPress

La proprietà CSS object-fit stabilisce come un’immagine si adatta alle dimensioni assegnate al suo elemento HTML. Nel caso più comune viene applicata a un elemento <img> al quale sono già stati impostati width e height, oppure width e aspect-ratio.

Il valore cover mantiene le proporzioni dell’immagine, riempie completamente lo spazio disponibile e ritaglia automaticamente le aree che non entrano nel contenitore. Questo comportamento è adatto alle immagini in evidenza e alle anteprime con altezza uniforme.

Il valore contain mantiene invece visibile l’intera immagine, aggiungendo eventualmente spazio vuoto sui lati o sopra e sotto. È preferibile per loghi, schermate, infografiche e immagini nelle quali il ritaglio potrebbe nascondere informazioni importanti.

  • object-fit: cover riempie il riquadro e ritaglia l’immagine.
  • object-fit: contain mostra tutta l’immagine senza deformarla.
  • object-fit: fill adatta l’immagine al riquadro anche deformandola e va generalmente evitato.
  • object-fit: none conserva le dimensioni intrinseche dell’immagine e può lasciare parti fuori dal contenitore.

object-fit non modifica il file nella Libreria Media di WordPress. Il ritaglio avviene soltanto durante la visualizzazione nel browser, quindi la stessa immagine può essere mostrata con dimensioni e proporzioni diverse in altre pagine.

Come applicare object-fit a un’immagine WordPress

Passo 1: aggiungere una classe CSS all’immagine

Apri l’articolo o la pagina nell’editor a blocchi di WordPress e seleziona il blocco Immagine. Nella barra laterale destra apri la sezione Avanzate, quindi inserisci una classe nel campo Classe CSS aggiuntiva.

Per esempio, usa questo nome:

immagine-ritagliata

La classe viene aggiunta all’elemento immagine senza modificare il file originale. Se l’immagine si trova dentro un blocco personalizzato o in un modello del tema, è possibile assegnare la stessa classe dall’editor del sito oppure direttamente nel markup del tema.

Passo 2: inserire il CSS nel personalizzatore o nell’editor del sito

Con i temi classici, vai in Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi, il percorso può essere Aspetto > Editor > Stili > CSS aggiuntivo, se il tema e la versione di WordPress rendono disponibile questa voce.

Inserisci questo codice:

.immagine-ritagliata {
width: 100%;
height: 260px;
object-fit: cover;
object-position: center;
display: block;
}

La larghezza del 100% fa occupare all’immagine tutto lo spazio disponibile, mentre l’altezza di 260 pixel crea un riquadro uniforme. object-position: center mantiene centrata l’area visibile durante il ritaglio.

Il CSS applicato a .immagine-ritagliata agisce soltanto sugli elementi ai quali è stata assegnata quella classe. Questo limita il rischio di modificare accidentalmente tutte le immagini del sito.

Passo 3: controllare il risultato su schermi diversi

Ridimensiona la finestra del browser e verifica l’immagine su smartphone, tablet e computer. Un’altezza fissa può funzionare bene per le card, ma risultare troppo grande su uno schermo stretto.

Per mantenere una proporzione più flessibile puoi usare aspect-ratio:

.immagine-ritagliata {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
object-position: center;
display: block;
}

Con aspect-ratio: 16 / 9, il browser calcola l’altezza in base alla larghezza disponibile. L’immagine resta quindi proporzionata nelle varie dimensioni dello schermo, mentre object-fit: cover nasconde le parti che eccedono il rapporto 16:9.

Se il tema imposta già un’altezza o un comportamento incompatibile, può essere necessario verificare le regole applicate agli elementi .wp-block-image img. Evita di usare !important come prima soluzione: è preferibile aumentare la precisione del selettore CSS.

Come scegliere il punto del ritaglio

L’immagine viene ritagliata rispetto al centro quando non viene specificato un valore diverso. Il punto visibile può essere spostato con object-position, usando percentuali, parole chiave o valori in pixel.

.immagine-ritagliata {
width: 100%;
height: 260px;
object-fit: cover;
object-position: 50% 30%;
display: block;
}

Il primo valore controlla la posizione orizzontale e il secondo quella verticale. Con 50% 30%, il ritaglio resta centrato in orizzontale e si sposta verso la parte superiore dell’immagine.

Per una persona o un soggetto posizionato in alto puoi usare:

.immagine-ritagliata {
object-fit: cover;
object-position: center top;
}

Per un prodotto collocato nella parte inferiore dell’immagine puoi invece usare:

.immagine-ritagliata {
object-fit: cover;
object-position: center bottom;
}

L’uso di object-position non cambia il file e non crea una nuova immagine nella Libreria Media. Modifica solamente quale area del file viene mostrata all’interno del riquadro.

Come usare object-fit per immagini in evidenza e card

Per applicare lo stile a tutte le immagini in evidenza di un determinato componente, è possibile usare una classe del contenitore. Questa tecnica è utile quando il tema produce il markup dell’immagine automaticamente.

.card-articolo .wp-post-image {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center;
display: block;
}

La classe .wp-post-image è frequentemente utilizzata da WordPress e dai temi per l’immagine in evidenza, ma il nome può cambiare in base al tema. Controlla il codice HTML con gli strumenti per sviluppatori del browser prima di applicare un selettore globale.

Per immagini decorative o prive di informazioni essenziali, cover è spesso la scelta più ordinata. Per immagini informative, grafici e screenshot è più sicuro usare contain, così il ritaglio non elimina testo o dettagli rilevanti.

.immagine-informativa {
width: 100%;
height: 300px;
object-fit: contain;
background-color: #f2f2f2;
display: block;
}

Il colore di sfondo rende visibile lo spazio libero lasciato da contain. Il testo alternativo dell’immagine deve comunque essere impostato nell’editor di WordPress, perché object-fit modifica solo la resa visiva e non sostituisce le informazioni di accessibilità.

WordPress continua a fornire l’immagine tramite gli attributi srcset e sizes quando il tema li supporta. Il CSS non riduce automaticamente il peso del file originale: per migliorare le prestazioni servono dimensioni appropriate, compressione e formati moderni come WebP o AVIF, quando compatibili con il sito.

La combinazione object-fit immagini WordPress CSS permette quindi di uniformare il layout senza interventi distruttivi sui file e senza perdere la possibilità di riutilizzare le immagini in altri contesti.

Potrebbe interessarti anche:

FAQ

No. object-fit cambia soltanto il modo in cui l’immagine viene visualizzata nel browser e non modifica il file nella Libreria Media.

L’immagine deve avere dimensioni definite, come height, oppure un rapporto aspect-ratio. Senza un’altezza o un contenitore dimensionato, il ritaglio potrebbe non essere visibile.

Usa object-fit: contain. L’immagine resterà interamente visibile, ma potrebbe comparire spazio vuoto all’interno del riquadro.

Sì. La proprietà object-position, per esempio object-position: center top, permette di scegliere quale area rimane visibile dopo il ritaglio.

Sì, purché il selettore corrisponda al codice HTML prodotto dal tema, ad esempio .wp-post-image, e l’immagine abbia dimensioni definite.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti