Lo stesso Flex non mi pare che funzioni sempre
eheh
non è mica la bacchetta magica (anche se qualche magia la fa); bisogna capire per cosa lo stai usando, come lo vai ad usare e in che contesto, cioè quali altre eventuali regole sono applicate...
ma questo l'ho già scritto, e mi quoto:
Anche se ognuna agisce in modo specifico secondo le proprie caratteristiche, ogni cosa nel CSS va valutata nel contesto in cui è posta, dove possono esserci molteplici altri fattori e regole CSS che influiscono sul risultato.
Un errore comune è pensare che ogni "comando" CSS sia fine a sé stesso. Capisco che se non si hanno le dovute conoscenze su tutte le varie caratteristiche CSS, può risultare difficile capire certi meccanismi per ottenere dei risultati adeguati nei diversi contesti.
Vorrei che sia chiaro questo concetto, perché anche per quel tuo object-fit, vale la stessa identica cosa — ci sono altri fattori da valutare e relative regole da considerare — qui sta l'ultimo punto che ti indico per arrivare all'obiettivo.
Strano l'avevo lasciato apposta perchè tu lo vedessi.
Sì, scusami, era restato in cache il precedente css, ora ho forzato l'aggiornamento e lo vedo 
L'ultimo punto è capire bene la logica di funzionamento della proprietà object-fit.
Ho agigunto width:100%; e qualcosa sta cambiando ....
Mentre ti sto rispondendo ho visto che ci stai arrivando da solo 
Cerco comunque di darti delle indicazioni a riguardo.
Nelle documentazioni si possono trovare diversi esempi di applicazione, tuttavia ho visto che non viene messa alcuna enfasi su un fattore fondamentale per cui questa proprietà possa funzionare a dovere: questa proprietà NON agisce sulle dimensioni dell'elemento, ma solo sul suo contenuto.
Faccio una panoramica e cerco poi di chiarire: object-fit agisce sulle dimensoni del "contenuto" di "elementi sostituiti", come appunto <img>. Abbiamo quindi il "contenitore" (cioè l'involucro dell'elemento stesso) e il "contenuto" (cioè l'insieme di dati che sono rappresentati visivamente dentro il contenitore).
Ora, con object-fit viene "rielaborato" il solo contenuto, prendendo però come limiti di riferimento (in cui il contenuto è rielaborato) l'ingombro occupato dal suo contenitore.
Cosa significa questo?
E' presto detto, il contenuto non può eccedere oltre le dimensioni del suo contenitore.
Arriviamo alla conclusione. Nella tua pagina vengono applicate delle dimensioni per ogni img:
codice:
img {
max-width: 100%;
height: auto;
}
In particolare quel height:auto fa in modo che l'elemento img (il contenitore) assuma la sua altezza originale una volta che il suo stesso contenuto è caricato sulla pagina. Ma tu non vuoi questo.
Tu vuoi invece che l'elemento <img> vada ad occupare l'intera colonna, cioè l'intero ingomgro del suo relativo contenitore (il <div> in cui è presete l'elemento <img>).
Quello che devi fare quindi è sovrascrivere width ed height per la tua img (che ora puoi selezionare appunto con ".calmodal-logo img") in modo che si portino al 100% del relativo contenitore div (cioè la tua colonna).
Per ottenere quello che hai chiesto, ti basterà questo:
codice:
.calmodal-logo img {
object-fit: cover;
width: 100%;
height: 100%;
}
per il momento è tutto... spero di aver chiarito qualche perplessità, o quantomeno di non aver creato più confusione