Slide di immagini responsive all'interno di figura

[KillerWorm]

Il problema da mobile si puo notare anche rimpicciolendo la finestra del browser nel pc.

Ho visto.

però si creano degli spazi vuoti sopra e sotto, dovuti credo all'impostazione 500px.

Sì, credi bene. Il discorso non è cosi semplice da capire ma il problema di fondo (in linea di massima) sta nel fatto che usando delle immagini impostate come background (e non come elementi <img>) non si può determinare l'ingombro effettivo dell'immagine stessa così da poter calcolare le dimensioni del suo contenitore. Tuttavia, se conosci a priori le dimensioni o, meglio, il rapporto delle dimensioni delle immagini, si può stabilire di impostare l'altezza del contenitore in modo proporzionale a quella che è la sua effettiva larghezza.

In questo caso si può usare la proprietà padding in modo percentuale, che sostanzialmente farà sempre riferimento alla larghezza dell'elemento (anche quando si tratta dei padding verticali).
Ora, stabilendo che le dimensioni (larghezza per altezza), di ciascuna di quelle immagini, siano 1140x500px (come vedo nella pagina), il rapporto percentuale per determinare l'altezza, rispetto alla larghezza, sarà 500/1140x100, che è circa 43.8%.

A questo punto puoi lasciare, per gli elementi <li> (contenitori delle immagini) il valore di height come auto, e applicare quel valore percentuale ad uno dei padding verticali (top o bottom).

Sostanzialmente nel CSS dovrai rimuovere la riga height:500px (o impostarla come auto) e applicare il padding per quel selettore (oltre alle altre regole), una cosa del genere:

.portfolio-single article figure .slides li {
  height: auto; /* oppure lasciarla non impostata perché questo è il valore di default */
  padding-top: 43.8%; /* agirà sull'altezza in proporzione alla larghezza di questo elemento */
  /* ... altre eventuali regole */
}

E' chiaro che il rapporto di tutte le immagini che andrai ad inserire dovrà corrispondere sempre a quel valore per poter funzionare correttamente. Ti consiglio comunque di lasciare impostato background-size:cover piuttosto che contain; se le immagini hanno la stessa dimensione prestabilita, non ci sarà nessuna differenza, però, mettendo il caso che ci sia qualche piccola differenza nel rapporto stesso delle immagini (che può essere qualche 1%) le immagini saranno leggermente ritagliate (per riempire il contenitore) ma non si vedranno eventuali spazi vuoti.

Vedi se può andare.




Nota a margine: nella tua pagina vedo che i pulsantini di navigazione (i cerchietti sovrapposti allo slider) hanno un top:30px che, per la soluzione proposta, possono risultare troppo in basso quando l'altezza dello slider si riduce (visualizzazione su mobile), per tale motivo ti consiglio di impostare un valore percentuale. Ad esempio:

.portfolio-single article figure .flex-control-paging {
  /* ... */

  top: 5%;

  /* ... */
}