Buongiorno Guido,
che risoluzione hanno le immagini che vorresti utilizzare per le card?

sono partito da 1536 * 1024 , ma posso anche ridurle in modo proporzionale

ciao, ... non mi dilungo sulla modalità CSS COVER, risultata spesso ostica...
... ma...!... ...sapendo appunto che le immagini sono in tale modalità basterebbe usare immagini congrue al rapporto ratio più vicino rispetto all'aspetto che potrebbe avere la cella ospite...
... per esempio, supponendo di avere la pagina a 1150px di larghezza e di impostare tre card per riga con altezza 250px, il formato conseguente per le immagini più adatte dovrebbe stare nell'arco dei rapporti razionali tra (4:3) e (3:2); congruo anche per le tue misure (1536 * 1024) = (3:2)...
... in questo modo le immagini occuperanno sempre tutta l'area della scheda con la parte importante sempre centrata...
... ... ... oppure, ...se proprio lo si vuole, con codice CSS EXTRA si potrebbe inibire la modalità COVER, facendo così adattare l'immagine allo spazio disponibile; ciò ovviamente comporterebbe che una immagine a sviluppo verticale mostrerebbe lateralmente area vuota, ed una immagine a sviluppo orizzontale mostrerebbe aree vuote sopra-sotto, ma l'immagine sarebbe per intero...
...(.. in alternativa potresti provare ad usare le gallerie justified e masonry...)...
...!... STAMP per avere un'idea in caso di uso immagini promiscue usate senza criterio:

.

ciao

.

Io ho risolto con codice extra, ma il fatto stesso di dover intervenire in questo modo evidenzia alcune carenze del Portfolio. Nel breakpoint 959.9px resto comunque vincolato a un focus centrale con un leggero taglio superiore. Quando avrò tempo realizzerò una mia soluzione partendo da zero.

Francamente considero il Portfolio uno degli oggetti meno riusciti di WebSite X5. Non è una semplice opinione: ho già dimostrato in privato alla stessa INCOMEDIA che con poche righe di codice si possono ottenere risultati nettamente superiori sotto il profilo della flessibilità, del controllo grafico e, nella fattispecie, della disposizione dei pulsanti.

In ogni caso rimane una domanda: perché nel 2026 un oggetto Portfolio non mi permette di gestire focus point, object-position, allineamento verticale o altre opzioni che ormai sono presenti nella maggior parte delle soluzioni moderne?

Per il resto la modalità Cover mi è perfettamente chiara, ma non è quello il punto della mia osservazione. È risaputo che utilizzando immagini con rapporti adeguati si può ridurre il problema del ritaglio, così come so che eliminando il Cover si ottiene l'immagine completa a discapito dell'occupazione dello spazio.

La mia critica riguarda piuttosto la flessibilità dell'oggetto Portfolio. Oggi molte soluzioni consentono di gestire il punto focale dell'immagine, l'allineamento verticale/orizzontale o altri criteri di adattamento senza costringere l'utente a ricorrere a CSS personalizzati.

È proprio questo che mi ha portato a realizzare una soluzione alternativa tramite codice extra, dimostrando che tecnicamente la gestione potrebbe essere molto più flessibile di quella attualmente disponibile ma rimane troppo personalizzata.

A questo si aggiunge un altro limite che personalmente trovo difficile da comprendere: l'obbligo di definire un'altezza fissa per le card. Ancora oggi non esiste una gestione realmente dinamica dell'altezza e, soprattutto, in diversi casi tale impostazione risulta talmente vincolante da non poter essere superata efficacemente nemmeno tramite CSS personalizzato. Anche questo riduce notevolmente le possibilità di personalizzazione del componente.

Per quanto riguarda il classico rapporto d'aspetto (3:2 o 4:3): è vero che calcolando al millimetro il ratio in base alla griglia e usando solo immagini con quel preciso rapporto si limitano i danni del taglio. Ma nel mondo reale dei siti per clienti finali, pretendere che chi gestisce il sito carichi foto sempre e solo con quel rapporto geometrico preciso — pena il ritrovarsi la testa tagliata in primo piano o il soggetto decentrato — è un'utopia operativa. Il cliente carica la foto che ha scattato col telefono o quella verticale che gli passa il fornitore, e si aspetta che il CMS o l'oggetto grafico la gestisca in modo intelligente.

Anche suggerendo di "inibire la Cover" bisogna mettere in conto l'accettazione di bande vuote sopra/sotto o ai lati. Anche qui: è la fiera del compromesso stilistico. Una griglia di card con immagini di proporzioni miste in cui alcune riempiono tutto e altre lasciano buchi bianchi o spazi vuoti asimmetrici è esteticamente disordinata, a meno di non mettersi a ricodificare mezza griglia con logiche flexbox/grid avanzate.

Prova l'esempio di Giancarlo web che è molto interessante se poi vuoi provare anche un mio codice extra da mettere nelle proprotà di pagina eccolo:▼

• Realizza immagini a 500x500 (per provare)
• regola nelle impostazioni in card per riga 3 (prova cosi all'inizio)
• Distanza 5
• Altezza 480

Carica le immagini nel portfolio

Vai sulle proprietà della pagina e inserisci il codice prima della chiusura del tag Head.

<style>
.portfolio__card__bottom-bar__title {
width: 100%;
text-align: center !important;
}

.portfolio__content img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
object-fit: cover !important;
display: block !important;
}

/* CORREZIONE PER IL RANGE 959.9px - 480px CON BORDO, RADIUS E DISTACCO */
@media screen and (max-width: 959.9px) and (min-width: 480px) {
/* Limitiamo l'altezza del contenitore per evitare che invadano header/footer */
.portfolio__card,
.portfolio__content {
max-height: 500px !important;
overflow: hidden !important;
}

/* Diamo un bordo, angoli arrotondati a 10px e uno sfondo bianco pulito */
.portfolio__card {
border: 1px solid #dcdcdc !important;
border-radius: 10px !important;
margin-bottom: 15px !important; /* Crea finalmente lo stacco verticale tra una card e l'altra */
background-color: #ffffff !important;
}

/* Forziamo l'immagine a riempire il box senza esplodere */
.portfolio__content img {
height: 100% !important;
max-height: 450px !important;
object-fit: cover !important;
margin: 0 auto !important;
}
}

/* REGOLA GLOBALE by losmanettone 2026: Mostra l'immagine intera senza tagliare nulla e adatta l'altezza */
.portfolio__content img {
height: auto !important;
object-fit: contain !important; /* Mostra l'immagine intera senza tagliare nulla */
}

</style>

NOTA: in questa configurazione Il taglio è di circa 2px per parte. Calibrando meglio le immagini raggiungi la perfezione. Questa configurazione è già operativa su un sito di un nostro cliente.

Buon lavoro.