Immagine Oggetto Content Slider non si adatta a visualizzazioni inferiori 
Autor: MAX B.
Visitado 100,
Followers 2,
Compartido 0
Buongiorno a tutti.
Ho un dilemma che mi affligge da sempre: le immagini caricate tramite Oggetto Content Slider (utilizzo solo immagine sfondo) non si adattano alle visualizzazioni inferiori (responsive), rendendo le immagini su tablet e telefono praticamente inutili, in quanto si vede solo la parte centrale.
Possibile che non ci sia in modo per adattarle? Andrebbe benissimo anche se le tagliasse di poco, ma vederle così fa schifo.
Esempio da pc e da telefono:
Publicado en

Lo puoi fare ma esclusivamente con del codice extra. Vai qui sul sito di Roberto e sul quale diamo in molti il nostro contributo:
https://www.losmanettone.it/content-slider.php
è tutto spiegato passo passo.
P.S. se vai sul sito e clicchi sulla voce di menù "SLIDE", trovi varie tipologie di procedure per adattare l'immagine della content slider
Ciao
Autor
@Giuseppe, grazie davvero per l'indicazione. Un'ottima risorsa per ovviare alle mancanze sulla grafica di Website. Tuttavia, non posso metter mano al codice "Prima della chiusura del tag head", in quanto è inserito il codice di Google Tag Manager.
ASSISTENZA DI INCOMEDIA: com'è possibile che le immagini create con Content Slider si possano vedere per intero solo con risoluzione per pc e superiori?
Max è sulla pagina dove hai il Content slider non è un codice generale da inserire al punto 1
Già richiesto più volte nel tempo ma senza esito
Buongiorno,
la questione è stata segnalata come suggerimento per apportare migliorie relative al responsive all'oggetto, provvederò ad aggiungere anche il tuo feedback a riguardo.
Resto a disposizione.
... ... ciao, ... ci sarebbe un modo (o più) con piccolo intervento EXTRA se proprio necessario...
... ho spiegato diverse decine di volte le motivazioni di tale comportamento, che può sembrare non corretto, ma, capendo la modalità CSS COVER e se usato in modo opportuno potrebbe anche non risultare poi così problematico, per esempio usando immagini quadrate...
... comunque, da quando è stato messo a disposizione il Content-Slider ho fornito tutte le possibili ed immaginabili pseudo-soluzioni, dal controllo con media-query a quello dinamico elastico, e al doppio controllo con il metodo del DIV_SINO...
... se tu posti il LINK del tuo esempio online si potrebbe fare una valutazione mirata sulle possibili prospettive o possibili soluzioni...
.
ciao
.
È una questione già ribadita in altri interventi, ma probabilmente non è stata compresa appieno.
Non si mette in discussione che il comportamento attuale dell’oggetto non sia corretto; il punto centrale riguarda le esigenze del cliente.
Se l’immagine è utilizzata come sfondo e si desidera applicare la modalità CSS cover su schermi di piccole dimensioni, questa soluzione è assolutamente appropriata.
Se invece si intende mantenere la modalità CSS contain, garantendo che l’immagine resti sempre interamente visibile e proporzionata, questa opzione deve essere disponibile direttamente nell’oggetto.
Il tutto senza ricorrere a codice personalizzato o soluzioni alternative.
Spero che la richiesta risulti ora più chiara.
CSS COVER
https://giancarloweb.altervista.org/content-slider.html
CSS CONTAINER
https://giancarloweb.altervista.org/content-slider-2.html
Vai sul sottonotato link ▼
ESEMPIO
Poi per vedere ancora meglio VAI QUI e alla voce "carica file" inserisci questo sito: https://www.losmanettone.it/content-slider.phpo altri dove tu vuoi vedere il comportamento responsive o ancora meglio guarda i loro template come quelli di GiancarloWeb o Giuseppe Guida che nulla hanno a che vedere con quelli che troviamo sul software. Il giorno che ci assumeranno incomedia raddoppierà le vendite.
Ci sono degli esempi ma ci sono anche di più sofisticati che non sono riportati in quanto più complessi e non adatti per utenti alle prime armi. SE lo hanno fatto gli smanettoni lo puo fare anche incomedia. Devo ricordare a quando risale la mia ultima segnalazione?
Il trucco che tanti scienziati non capiscono e dividere il codice i due situazioni differenti comme spiegato professionalmnente da Giancarlo Web. In realtà cover e contain sono due modalità opposte, quindi non possono essere “fuse” in senso stretto. Però si può ottenere un comportamento ibrido e responsive, scegliendo dinamicamente quale tecnica applicare in base alle dimensioni dello schermo o del contenitore. Certo non è per neofiti ma comunque che mi rappresenta una AI su un software che poi genera situazioni INGUARDABILI. Ieri stavo per l'appunto guardando un bel sito di un utente ma stroppiato da mancati responsive dei content slider;un vero schifo.
Ecco un esempio IBRIDO: (solo per esperti come INCOMEDIA)
Puoi dire: su schermi piccoli usa contain (così l’immagine resta visibile e proporzionata), mentre su schermi grandi usa cover (così riempie bene lo spazio).
<style>
.responsive-bg {
background-image: url("immagine.jpg");
background-repeat: no-repeat;
background-position: center;
}
/* Default: cover */
.responsive-bg {
background-size: cover;
}
/* Su schermi piccoli: contain */
@media screen and (max-width: 600px) {
.responsive-bg {
background-size: contain;
}
}
</style>
Approccio “object-fit” su <img> quando si ha intenzione di utilizzare un tag <img> invece di background-image, sfruttando object-fit:
<style>
img.responsive {
width: 100%;
height: 100%;
object-fit: cover; /* default */
}
@media screen and (max-width: 600px) {
img.responsive {
object-fit: contain; /* su mobile */
}
}
</style>
Soluzioni ibride con JavaScript quando vogliamo più controllo e rilevare le dimensioni del contenitore cambiando la classe dinamicamente:
<script>
function updateBackgroundMode() {
const el = document.querySelector('.responsive-bg');
if (window.innerWidth < 600) {
el.style.backgroundSize = 'contain';
} else {
el.style.backgroundSize = 'cover';
}
}
window.addEventListener('resize', updateBackgroundMode);
updateBackgroundMode();
</script>
Non è una vera “fusione” delle due tecniche, ma una logica di switch responsiva:
Cover quando serve riempire.
Contain quando serve preservare proporzioni e visibilità.
Così ottieni un comportamento adattivo senza duplicare codice e senza forzare workaround.
Infine se qualke inteliggentone ha pensato: e come fa a gestire i vuoti laterali?
.responsive-bg {
background-image: url("immagine.jpg"); /* <-- sostituisci con la tua */
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* default: desktop */
border: 2px solid #333;
border-radius: 12px;
transition: background-size 0.3s ease;
}
/* Mobile: immagine intera visibile */
@media screen and (max-width: 600px) {
.responsive-bg {
background-size: contain;
background-color: #f0f0f0; /* riempie lo spazio vuoto */
}
}
/* Tablet: compromesso */
@media screen and (min-width: 601px) and (max-width: 1024px) {
.responsive-bg {
background-size: cover;
background-position: top center;
}
}
/* Desktop: riempie tutto */
@media screen and (min-width: 1025px) {
.responsive-bg {
background-size: cover;
background-position: center;
}
}
SEMPRE PER INCOMEDIA:
A tutto c'è una soluzione o quasi.......
altrimenti con un TRUCCO è possibile aggirare tutto questo ambaradam come in questo ESEMPIO