background image centrata rispetto al div, escludendo le proporzioni

[stardom]

Non mi serve cover, né contain, né max-width, ma una combinazione: l'immagine deve essere centrata internamente al div senza tener conto delle proporzioni (vedi allegato).
Qualche suggerimento?

[KillerWorm]

Scusa ma non mi è chiaro: l'esempio mostra l'immagine che sborda dal div. Se questo è ciò che vuoi ottenere, ovviamente non è possibile col background, perché questo può ricoprire solo l'ingombro dell'elemento stesso. In tal caso bisognerà che il div stesso, in qualche modo, assuma le dimensioni dell'immagine applicata come sfondo e venga poi posizionato a dovere in modo da "fuoriuscire" e risultare centrato rispetto al suo contenitore; magari applicando un transform:scale() o qualcosa del genere.

[stardom]

l'esempio mostra l'immagine che sborda dal div

No, era un esempio per far capire come l'immagine si centrava rispetto all' "obbiettivo/finestra" (il div). Una sorta di "center center" ma con height:100%.

[KillerWorm]

ok, quindi è un background cover con position center center

[stardom]

ok, quindi � un background cover con position center center

eh no, avevo gi� provato... puoi dare un'occhiata veloce qui
L'immagine non deve partire da sinistra, ma essere centrata come se flottasse al centro di un div pi� piccolo. In pratica non va ridimensionata pi� di tanto.

[KillerWorm]

ma quella pagina non corrisponde a quanto hai indicato sopra.
Parli di background ma non vedo alcun background per quegli elementi div. Vedo invece una struttura con degli elementi <img> che, tra l'altro, non stanno direttamente dentro i relativi div.

Questo è quello che hai su quella pagina:

<div class="single-grid-banner-container">
  <a href="...">
    <img src="...">
  </a>
</div>

Chiaramente tra un elemento img e una immagine impostata come background ci sono svariate differenze.

Io una soluzione potrei anche saperla ma, a scanso di ulteriori equivoci, puoi riformulare la tua richiesta in maniera più precisa e secondo l'esatto scenario su cui stai lavorando?

[stardom]

Si credo di essermi spiegato male, anche perchè sto provando transform:scale e non è una strada sbagliata.
Non vedi il grid con i post nella pagina? Ogni elemento del grid ha una immagine (come indicato nello screenshot di cui sopra). Quella immagine dovrebbe essere centrata, e non importa che le sue estremità vengano tagliate... l'importante è che riempia l'altezza del div.
Una sorta di ridimensionamento verso il piccolo, max all'altezza del div.

[stardom]

ci sono quasi... transform: translateX(-50%) scale(0.8, 0.8);

[KillerWorm]

ok, parliamo quindi di elementi <img> da centrare nel proprio contenitore, non di background image, giusto? Come già detto, sono due cose tecnicamente ben diverse tra loro.

Quella tua <img> sta dentro un elemento <a> che a sua volta sta dentro un <div>.

Oltre il tuo transform: translate, qui una possibile soluzione.
Lasciando le cose come stanno nella tua pagina, puoi usare flexbox sull'elemento <a> applicando queste proprietà:

display: flex;
align-items: center;
justify-content: center;

questo fa in modo di centrare i suoi contenuti (cioè l'elemento <img>). Tenendo conto che hai comunque un'altezza fissa impostata per quelle immagini, questa soluzione funziona per immagini con un formato landscape, cioè più larghe che alte.

Ovviamente sarebbe meglio applicare una specifica classe per quegli elementi <a> in modo che tu gestire più facilmente l'applicazione delle regole CSS.

Una seconda soluzione è quella di usare le nuove proprietà CSS, object-fit e object-position, supportate dai recenti browser.
In questo caso puoi usare queste proprietà sull'elemento <img> usando i valori cover e center, proprio come per le proprietà background-size e background-position.

Considera che il valore di default per object-position è 50% 50%, che corrisponde a center; per cui nel tuo caso ti basta anche solo specificare object-fit:cover.

Considera inoltre che dovrai rimuovere l'attuale max-width:none specificato nel file single-bus-style-1.css sotto la riga 914, perché farebbe conflitto; o magari, se includi una nuova regola, fare un override con un valore auto, ad esempio.

[stardom]

Soluzioni molto molto interessanti. Per ora ho utilizzato transform: translateX(-50%) scale(1, 1); per avere un riscontro immediato di quale strada sto prendendo. Ma devo verificare eventuali conflitti. Sicuramente domani mi provo anche le soluzioni con le nuove proprietà che suggerisci.