Slide di immagini responsive all'interno di figura

[Andrefior]

Buongiorno a tutti,

vorrei un aiuto per quanto riguarda uno slide di immagini che non si adatta correttamente alla visualizzazione su dispositivi mobili. Il resto del sito è ok, alcuni slider son fatti con revolution slider e si adattano bene, ma gli slide dei lavori inseriti all'interno del portfolio non si adattano (questi non sono fatti con revolution slider), si vede solo una porzione dell'immagine.

Grazie dell'aiuto

<article>
                    <figure>
                        <ul class="slides">
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_215606-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_212610-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191010_183102-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/IMG_20191022_151657-1140x500.jpg');"></li>
</ul>
                    </figure>

.portfolio-single article figure iframe {
  width: 100%;
  height: 500px; 
}
.portfolio-single article figure {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden; 
  position: relative; 
}
.portfolio-single article figure .slides {
  list-style: none;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.portfolio-single article figure .slides li {
  float: left;
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

[KillerWorm]

Ciao, una impostazione con altezza fissa (height:500px) è con background-size:cover può tagliare parte delle immagini impostate come background, ma questo è il normale comportamento. Dalle tue indicazioni non è possibile riprodurre la reale situazione e capire esattamente se è presente un reale problema di visualizzazione.

Forse il sistema che stai usando non è adatto per ciò che vorresti ottenere o, forse, può essere più semplice e adatto l'uso di un sistema diverso. Dal momento che citi un altro tipo di sistema (revolution slider), il quale funziona come verresti nel resto del sito, mi chiedo (e ti chiedo) perché non usare quello stesso sistema anche in questa situazione?

[Andrefior]

Grazie per aver risposto, premetto che non sono esperto.
Ho pensato di usare revolution slider come ultima spiaggia, perchè dovrei rifare tutti gli slide dei lavori precedenti.
Ma soprattutto perchè il tema prevede nella sezione portfolio, per ogni singolo lavoro che vado a inserire, di poter scegliere o immagine fissa o slide (potrei sbagliare ma credo sia utilizzato flexslider).
Se scelgo slide, automaticamente mi crea uno slide con le immagini che carico in quel lavoro.
Con l'immagine fissa non ci sono problemi come con lo slide.
Il problema da mobile si puo notare anche rimpicciolendo la finestra del browser nel pc. Ho provato a mettere background-size: contain così riesco a vedere tutto lo slide in larghezza anche rimpicciolendo la finestra, però si creano degli spazi vuoti sopra e sotto, dovuti credo all'impostazione 500px.
Qui si puo vedere come a tutto schermo si vede correttamente, mentre se man mano rimpicciolisco la finestra si creano degli spazi: https://terraepaglia.it/portfolio/ri...a-terra-cruda/
Ho impostato quindi height: 100% in tutte le sezioni .portfolio-single article, ma non ho risolto, se però lo faccio nella sezione <li> sparisce lo slide.

[ac_socmel]

non posso aprire il sito perchè norton dice che non è sicuro
https://safeweb.norton.com/report/show?url=https%3A%2F%2Fterraepaglia.it%2F

[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%;

  /* ... */
}

[KillerWorm]

non posso aprire il sito perchè norton dice che non è sicuro

Premetto che non sono esperto, aggiungo solo ciò che visualizzo io, senza nulla togliere a norton. Personalmente aprendo il sito su FF, CH, Edge, Safari viene identificato come connessione sicura con certificato rilasciato da Let's Encrypt (su FF, CH e Safari) e da "Avast Web/Mail Shield Root" (su Edge).

Certo sul servizio norton viene riportata una minaccia: Phishing Attacks
... personalmente non so come interpretarla.

[MOD]
Ringraziando comunque ac_socmel per la segnalazione, invito Andrefior, se vuoi indagare sull'argomento e chiedere aiuto sul forum, di aprire eventualmente una specifica discussione nella relativa sezione Sicurezza informatica e virus così che qui non si vada OT. Grazie.

agli esperti l'ardua sentenza.

[Andrefior]

Grazie mille KillerWorm! è perfetto.

ac_socmel abbiamo avuto problemi in passato segnalati anche da google console, un tecnico ci ha ripulito il sito, abbiamo cambiato password wp e ftp e aggiunto un plugin di sicurezza. Ho visto che solo norton ci segnala ancora, sto cercando di risolvere.

Grazie ancora.