Fascia orizzontale con immagini scorrevoli 
Autor: Remo D.
Visitado 342,
Followers 2,
Compartido 0
Ho creato una fascia orizzontale con immagini di sfondo scorrevoli impostando nel menu Responsive design come sito responsive. In modalità desktop si vedono bene, in modalità smartphone vengono tagliate e si vedono ingrandite. La stessa cosa succede se ritaglio le immagini. Come risolvere?
Publicado en
Ciao cosa hai utilizzato per creare questo effetto? stile righe o un oggetto?
Autor
Grazie per la risposta. Ho utilizzato stile righe con elenco immagini e le funzioni estendi e parallasse
Lo stile righe non è responsive.
... senza postare il LINK dell'esempio online non si possono fare valutazione, ma sicuramente si tratterà della modalità responsive CSS-COVER(!), di cui questi esempi ne esprimono il concetto; capito questo dovresti capire il resto...
.
.
.
... la sezione gialla rappresenta la luce della finestra reale con la sezione dell'immagine che fa vedere a seconda dell'orientamento e/o delle misure della finestra:
... qui cover e ratio
.
ciao
.
Io credo che Remo intenda che l'immagine si adatti al device in cui viene visualizzato rispettando il rapporto d'aspetto senza essere tagliata nelle sue parti.
Grazie kolasim per il tuo intervento, ma mi permetto di evidenziare alcune considerazioni tecniche per chiarire la situazione anche al fine di darci un talio netto alla TUA stessa risposta di sempre!
Il comportamento che descrivi, relativo a CSS-COVER, è effettivamente un approccio utilizzato per gestire il ridimensionamento delle immagini di sfondo in base alla proporzione della finestra, ma è importante sottolineare che CSS-COVER non è sinonimo di responsive design. Si tratta di un concetto legato alla proprietà background-size e al rendering di un'immagine di sfondo, che si adatta all'area visibile senza distorsioni, centrando il contenuto o ritagliandolo secondo necessità. Quindi la proprietà suddetta in CSS è utilizzata esclusivamente per il rendering delle immagini di sfondo. Essa garantisce che un'immagine copra completamente il contenitore, mantenendo le proporzioni originali e adattandosi alle dimensioni dell'area visibile.
Parli sempre di CSS-COVER ma mai dei suoi limiti quali:
E non sottolinei mai che la proprietà background-sizenon ha alcuna relazione diretta con il responsive design nel senso più ampio del termine.
Il responsive design è un paradigma molto più ampio, che include l'adattamento dinamico di tutti gli elementi di un'interfaccia (layout, contenuti, immagini, tipografia) per ottimizzare l'esperienza utente su dispositivi di dimensioni e orientamenti differenti. Non può essere limitato alla gestione di un singolo aspetto, come il comportamento di un'immagine di sfondo.
Pertanto, se il sistema richiede interventi manuali o non risponde automaticamente alle variazioni di dimensione e orientamento della finestra in maniera completa e coerente, ciò rappresenta un limite nell'implementazione del responsive design. L'adattamento dovrebbe avvenire automaticamente, senza lasciare spazio a dubbi o incomprensioni tecniche da parte dell'utente finale.
Ritengo che sia importante distinguere tra concetti specifici (come CSS-COVER) e l'intero framework del responsive design, per evitare malintesi e garantire un'implementazione realmente efficace.
In parole più semplici, ho già segnalato in precedenza alcune problematiche relative a prodotti Incomedia acquistati e pubblicizzati come capaci di svolgere determinate funzionalità, ma che, di fatto, risultano avere una capacità responsive pari a zero.
Seguendo le tue riflessioni su CSS-COVER, sembrerebbe che la responsabilità del taglio delle immagini ricada sempre sull'utente neofita di grafica e/o programmazione, il che non mi sembra una giustificazione valida per un sistema che dovrebbe essere progettato per garantire un'esperienza utente ottimale.
Secondo te l'utente che segnala si dovrebbe mettere li a fare i calcoli come larghezza/altezza dell'immagine (aspectRatioImage = widthImage / heightImage)? O altresì calcolare il Rapporto d'aspetto del contenitore
come larghezza/altezza (aspectRatioContainer = widthContainer / heightContainer) e duslcis in fundu fare i dovuti confronti tra rapporti d'aspetto come aspectRatioImage >< aspectRatioContainer?
L'utente medio non è un esperto di calcoli matematici o di sviluppo web. Pretendere che comprenda concetti come il rapporto d'aspetto, il fattore di scala o il taglio dell'immagine significa caricarlo di una responsabilità che appartiene al progettista o allo sviluppatore.
L'obiettivo del design responsivo è automatizzare queste operazioni in modo che il sistema si adatti all'utente, e non viceversa. Aspettarsi che un utente finale effettui calcoli come quelli sopra riportati per ottenere un risultato visivamente accettabile è del tutto irrealistico e contrario ai principi del design centrato sull'utente. Ancora più grave è che Incomedia, in qualità di sviluppatore del sistema, non abbia implementato un vero responsive design, delegando di fatto all'utente la gestione di problemi che dovrebbero essere risolti dal software stesso.
Vediamo quale sarà la risposta di INCOMEDIA. Potrei anche offrire un mio ulteriore contributo con un click utile, ma ritengo che dovranno semplicemente riconoscere la fondatezza delle osservazioni espresse in questo post come esattamente dovresti fare anche tu come inopinabile professionista.
@Remo. In stile riga non potrai mai ottenere un effetto che cerchi a menochè tu non sia un bravo grafico. Non avendo a disposizione il link non saprei come aiutarti o suggerirti un oggetto incomedia che faccia al caso tuo.
... ti rispondo visto che mi hai nominato ma senza entrare nelle considerazioni per non frammentare, ...comunque io rispondevo a Remo cercando di interpretare a cosa si riferisse spiegandone quelle che forse secondo me potessero essere le possibile cause, ...per ogni aspetto possono esserci approcci diversi...
... se Remo mi risponderà potrò valutare una qualsiasi e se delle possibili soluzioni su quel che gli interesserebbe ottenere nel concreto…
ciao
.
... non sapendo ancora cosa cerca di ottenere, per me non si può dire ...
... se si trattasse solo di questo, ...allora, se ci farà sapere, potrebbe essere più semplice di quel che si possa pensare...
.
Solo se si tratta di una immagine e non di più immagini a meno che non si intervenga con il solito codice extra se sceglie sequenza immagini in slide e gli da in pasto un codicxillo; cosa che ho già provato con responsive breack-point per breack-point con media-query. Se non si va di codice si deve calcolare il CSS-COVER facendo prove su prove. Meglio ancora se utilizza l'oggetto content slider dove mettendo la trasparenza sullo sfondo e le immagini in sequenza dalle opzioni esterne all'oggetto, può approfittare per mettere un Titolo e uno slogan sopra le immagini ma sempre codice extra ci vuole. Non c'è ne sarebbe bisogno se incomedia lo facesse da sistema.
Autor
Grazie a Voi tutti per i commenti. Sono ignorante in materia ma intendevo in parole povere che l'immagine si adatti automaticamente all'area visibile, sia essa di un desktop o di uno smartphon, rispettando l'interezza senza essere tagliata.
di seguito riporto il nome del sito web.
https://www.prolocomontefaito.it/index.html
Grazie a tutti e auguri di buon anno.
... non ti preoccupare non vuol dire niente, l'importante in queste situazioni è postare le domande per i propri dubbi ed essere recettivi...
... il tuo esempio non è il classico Elenco immagini come SlideShow a sfondo della riga, ma simile, con applicato il parallasse non-fisso, che già per logica comporta un adattamento diverso delle immagini...
... in questo tuo caso sicuramente potresti ottenere il ridimensionamento razionale a tutta larghezza in modo molto semplice, con una mia vecchia idea, (L'uovo di Colombo), nata ai tempi della vecchia EVO.v12, ...più semplice del semplice...
... se ti interessa proseguire in questo senso col mio suggerimento, avvisami, perchè sì che è semplice, due click, ma lungo da argomentare, anche se assolutamente niente di difficile, e nel caso io ritornerò qui...
...(intanto nel caso fosse inizio a preparare qualche riga)...
.
ciao
.
Autor
Ogni aiuto è ben accolto, certo che mi interessa proseguire.
Grazie
... OK ... quindi, se ti interessa l'aspetto razionale progressivo, e se non devi usare altri oggetti che si sovrappongono alle immagini di sfondo attuali della riga, è semplicissimo con una mia vecchia e semplice idea annunciata prima e senza codici EXTRA......
... basta usare una sola e singola cella nella riga, estesa per tutta la larghezza della riga, e in questa cella devi inserire un'immagine PNG con una trasparenza ALPHA (0), con misure uguali o proporzionali a quelle dell'immagine usata per lo sfondo...
... le immagini della lista di immagini scorrevoli sarebbe meglio se fossero uguali in misure, oppure congrue tra loro, ma non è importante grazie al css-cover...
... ad esempio, se l'immagine di sfondo misura 1920x1080 px (16:9), allora nella cella puoi usare un'immagine PNG trasparente delle stesse dimensioni, oppure con misure congrue, ad esempio 1600x900px o anche 800x450px (vanno bene tutte in 16:9);
... in questo modo lo sfondo apparirà razionale...
... (ovviamente se si usano immagini trasparenti PNG con rapporti diversi, (da provare), ad esempio (3:2), (5:2), ecc., si otterrebbero diversi aspetti di ridimensionamento sulla base "css cover", indipendentemente dalla misure reali delle immagini di sfondo)...
... per poter capire, e per fare una prova veloce veloce, puoi scaricare con il tasto destro del mouse ed utilizzare questa stessa mia immagine (16:9) che vedi a vista nel prossimo mio Post; ...ed in allegato vi troverai anche la stessa immagine, ma completamente trasparente, senza i riferimenti in rosso...
... se proverai, ...in un secondo ti stupirai…
>>> .... segue prossimo post ... ... .. >>>
.
... ecco le due immagini, una, questa che vedi a vista, da scaricare con il destro del mouse, e quindi da usare nell'unico oggetto immagine contenuto nella cella di quella riga, ... ed anche la stessa immagine, ma completamente trasparente, qui allegata in basso allegato:
.
... con questa mia idea, e come puoi notare, "senza codici EXTRA", in passato alcuni utenti avevano realizzato accattivanti rappresentazioni...
... il PNG trasparente potrebbe contenere una scritta.logo, anche con interessanti effetti tipo vetro smerigliato...
... come mia ulteriore idea ad alcuni avevo fatto usare sequenze di PNG con testi-immagine a rotazione, con mio esclusivo codice EXTRA, e poi anche usando al posto dell'immagine singola, la galleria con immagini PNG semi trasparenti, ... molto belle a vedersi..
...
.
ciao
.
L'immagine PNG con le proporzioni che hai dato taglia le sue immagini a risoluzioni più basse.Provata a 1920 funziona meglio. ESEMPIO
... certamente sì; ... il tuo è un esempio completamente diverso da quello di Remo e trattato nei miei precedenti POST del "l'Uovo di Colombo", ...sotto gli occhi ed alla portata di tutti, ma non visto o pensato; ...il fatto risale a tre lustri fa...
...
... l'esempio di Remo ha immagini di sfondo non congrue ma pur vicine e compatibili al (!6:9),(la prima) cui mio PNG di esempio allegato che potrebbe essere compatibile con tale rapporto razionale; ...ovviamente lo stesso effetto RATIO si può ottenere sempre anche con il mio codice EXTRA...
... anche se non c'entra con l'esempio di Remo trattato qui, le tue immagini sono a sviluppo orizzontale, più allungate, vicine al rapporto (7:2)...
... per il tuo caso "content-slider" nel suo sito di aiuti Giancarlo o ha conservato sia la versione RATIO che quella FullHeight, con il mio codice EXTRA esclusivo, semplice, un copia/incolla alla portata di tutti, usato da diversi utenti in tutte le lingue in ambedue le versioni...
... nel tuo esempio la riga si adatta automaticamente al contenuto testuale dello stesso oggetto, e se il testo è ad hoc e non fluttua in formattazione, con gli esempi di Giancarlo potresti ottenere un ottimo risultato...
.
ciao
.
Ti ringrazio per il chiarimento e per aver sottolineato che la tua soluzione, a tuo parere, si configura come un “Uovo di Colombo”, ovvia e semplice da applicare. Tuttavia, vorrei evidenziare che, pur apprezzando l’intuitività dell’approccio che proponi, il contesto specifico di cui sto parlando presenta alcune particolarità che non sembrano completamente risolte da questa metodologia.
In particolare, nel caso delle immagini a sviluppo orizzontale o di contenuti dinamici, l’adattamento automatico dovrebbe garantire una gestione fluida, non solo delle proporzioni, ma anche della corretta formattazione del testo e del layout complessivo. Se, come riporti, il codice “EXTRA” è stato già utilizzato con successo da altri utenti, ritengo comunque utile rivederlo in funzione delle esigenze specifiche che ho evidenziato, soprattutto per ottenere una formattazione testuale coerente e responsiva.
Inoltre, ciò che può sembrare "ovvio" o immediato per un utente esperto non è necessariamente applicabile o intuitivo per tutti, specialmente se il risultato finale richiede ulteriori interventi manuali o adattamenti specifici. Questo contrasta con l'obiettivo di una piattaforma che dovrebbe garantire semplicità e automatizzazione.
Riguardo al riferimento al "content-slider" e alle soluzioni proposte, confermo di aver visionato l'esempio riportato. Tuttavia, ritengo che il codice necessiti di una revisione specifica, in particolare per quanto riguarda la formattazione dei testi. A questo proposito, ho già avuto modo di confrontarmi con Giancarloweb, segnalando alcune problematiche legate alla gestione del testo in termini di flessibilità e responsività. Seppur la soluzione proposta rappresenti un punto di partenza, credo che un ulteriore affinamento possa migliorarne l'applicabilità e l'efficacia in contesti reali.
Per tutto il resto...
Mentre è vero che il rapporto d'aspetto (16:9, 7:2, ecc.) influisce sull'aspetto visivo delle immagini, la questione principale da affrontare non è tanto la scelta del ratio, ma l'approccio al design responsivo. L'obiettivo del design moderno è adattare automaticamente gli elementi della pagina a varie risoluzioni senza richiedere interventi manuali (ad esempio, aggiustamenti di contenuto o di codice per risoluzioni specifiche). L'effetto che descrivi, basato su una corrispondenza precisa tra rapporto e contenuto, potrebbe non essere pratico per applicazioni reali che devono gestire una varietà di contenuti e dispositivi.
Concordo sul fatto che, nel mio esempio, le immagini siano orientate orizzontalmente con un rapporto di circa 7:2. Tuttavia, l'adattamento automatico al contenuto testuale non è un punto debole, bensì una caratteristica che risponde al principio del design centrato sull'utente. Aggiustare manualmente il testo o il formato non è un approccio sostenibile per una piattaforma che aspira a essere universalmente accessibile.
In questo contesto, vale la pena sottolineare una discrepanza significativa: mentre Incomedia presenta i propri strumenti come accessibili e facili da usare per creare siti web moderni e responsivi, la realtà dimostra che per ottenere ambienti davvero responsivi è spesso necessario un livello di competenza superiore a quanto dichiarato. Basta osservare i siti web creati con questi strumenti per notare come molti manchino di caratteristiche nel design responsivo o anche evidenti difficoltà nel soddisfare persino i requisiti di base, il che mette in discussione l'efficacia delle promesse di semplicità e automazione.
Per concludere, sebbene il concetto di CSS-COVER possa sembrare intuitivo non tutti gli utenti sono esperti in calcoli di proporzioni o gestione avanzata del layout. La sua implementazione richiede un livello di competenza che lo rende inadatto a chi cerca strumenti davvero accessibili e automatizzati, come quelli che Incomedia dovrebbe garantire. Ripeto....un sistema realmente user-friendly dovrebbe automatizzare queste operazioni, riducendo al minimo la necessità di interventi manuali e, soprattutto, di calcoli matematici complessi. In parole più semplici rimango convinto che se si automatizzasse tutto da sistema sarebbe meglio.
Ecco il content slider con il tuo codice.
Era quello a cui mi riferivo come titolo e descrizione. A fare si fa ma ti sarà passato per la mente.
corretta
Ciao a tutti, mi intrometto chiedendo se è possibile adattare le immagini contenute nell'oggetto Full Screen scroll text nella visualizzazione responsive, o meglio, far si che le immagini non vengano tagliate lateralmente nelle visualizzazioni dei breakpoint inferiori al primo per chè al di sotto della visualizzazione desktop queste vengono tagliate... però mi rendo conto che poi non avrebbe più senso la visualizzazione "full screen"...
Qui il link di esempio...
... bravo ... logica ed acuta deduzione che hai interpretato da solo...
... vedendo il tuo LINK quello che potresti fare per arrivare ad un compromesso sarebbe quello di usare immagini quadrate, in rapporto (1:1), per es. (800x800), in questo modo la parte centrale dell'immagine, che dovrebbe combaciare con la parte interessante della stessa, si troverebbe sempre al centro della finestra....
... nota: il tuo LINK mi ha fatto capire anche i grandi passi avanti che ha fatto il Programma con il "Parallasse fisso" posizionato in diverse righe, perfettamente e stranamente funzionante anche nel mio SmartPhone, cosa che sino a poco tempo fa sembrava non potesse funzionare, o è anche merito tuo che hai saputo usarne correttamente le opzioni disponibili...
,
ciao
.
... ... continua +
... in questi 3 STAMP simulati a seguire vedi l'immagine trasformata e posizionata al centro di cornice quadrata rossa, e di seguito la simulazione dell'immagine che si vedrebbe ritagliata in finestra molto larga o molto stretta...
.
... OK ... usando conternuti ad hoc per tale scopo come detto prima, non dovrebbero nascere problemi...
... in pratica i contenuti testuali non dovrebbero andare a capo in finestre ridotte per non alterare l'aspetto della cella ospite, e quindi per non perdere l'allineamento verticale che in alcuni casi, non sempre, potrebbe interferire con i margini della riga...
.
ciao
.
Kol l'utente potrebbe anche propendere per due soluzioni:
La prima: mantenere l'aspect ratio dell'immagine originale (2296px x 1178px), il rapporto tra larghezza e altezza che io calcolo come mi hanno insegnato a scuola eattamente come lo conosci tu:
Aspect Ratio=LarghezzaAltezza=22961178=1.948 (≈1.95)\text{Aspect Ratio} = \frac{\text{Larghezza}}{\text{Altezza}} = \frac{2296}{1178} = 1.948 \, (\approx 1.95)Aspect Ratio=AltezzaLarghezza=11782296=1.948(≈1.95)
Se LUI vuole ridimensionare mantenendo questo rapporto (1.95), basta scegliere una nuova larghezza o altezza e calcolare l'altra dimensione proporzionalmente.
Esempi di dimensioni con lo stesso aspect ratio:
Se l'altezza è 1000px:
Larghezza=1000×1.95=1950 px\text{Larghezza} = 1000 \times 1.95 = 1950 \, \text{px}Larghezza=1000×1.95=1950pxDimensione: 1950px x 1000px
Se la larghezza è 1024px:
Altezza=10241.95=525.64 (≈526) px\text{Altezza} = \frac{1024}{1.95} = 525.64 \, (\approx 526) \, \text{px}Altezza=1.951024=525.64(≈526)pxDimensione da 1.9: 1024px x 526px
Lui potrà sostituire la larghezza o l'altezza desiderata per calcolare l'altra dimensione e mantenere l'aspect ratio.
La seconda da te suggerita:
Scegliendo un'immagine con un aspect ratio 1:1 (quadrata), la larghezza e l'altezza devono essere giustamente uguali. Per fare ciò, dovrà scegliere una dimensione uniforme per entrambe le direzioni. Propenderei per un aspetto da 1024px al posto degli 800 ma è un mio parere personale.
La scelta della dimensione dipende dal suo obiettivo:
Tagliare l'immagine: Deve scegliere una dimensione quadrata più piccola che rientri nelle dimensioni originali. Ad esempio:
Ridimensionare proporzionalmente: Può ridurre l'immagine a una dimensione quadrata, ma perderà parte dell'immagine originale (tagliando i lati). Esempio:
Caro Remo se hai bisogno di un'immagine senza distorsioni, devi necessariamente tagliare parte dell'originale per adattarla al formato 1:1. Puoi decidere quale parte dell'immagine conservare (centrale o altro) esattamente come suggerito da Kolasim.
Io però non finirò mai di ripetere che non tutti siamo kolasim. Avrà pure fatto passi da gigante questo software ma per me c'è ancora molto da fare.
@Remo come suggerimento. Il suggerimento di kolasim lo devi applicare a molte immagini del tuo sito. Allo stato vengono tutte tagliate e pesano troppo. Confermo quanto notato da Kris: l'oggetto google traslate di default e fuori dall'area del progetto. L'altro traduttore ha un problema: se per caso si sceglie la lingua Russa lui ti porta in Russo tutta la lista a discesa.Per uno che non sa il russo tornare all'italiano diventa un problema.
Kol, non credo si tratti di parallasse fisso per lo Stile Righe, non vorrei tu ti riferisci ai testi scorrevoli sulle immagini di sfondo, quelli sono Oggetti "Full Screen scroll text" che comunque usano un effetto di parallasse, ma non è il programma in sè, è l'Oggetto ad avere quella funzione.
Il parallasse (almeno per quanto riguarda lo Stile righe) è stato inibito da Incomedia sui dispositivi mobili e non mi risulta abbiano riattivato tale impostazione (a meno che si usa un codice extra come ho fatto in alcuni casi).
Autor
Grazie per il supporto. Proverò con i vs consigli a cercare la soluzione ottimale. Chiedo dove posso trovare l'oggetto "content slider"?
Saluti
... purtroppo per orientarmi non mi hai hai fatto sapere del risultato delle prove che ti avevo consigliato di fare, e comunque, se cambi approccio al metodo iniziale, per me e relativamente a me sarebbe meglio se apri un nuovo Argomento a tema, per evitare confusioni e frammentazioni...
... OK ... ciao a tutti ... tutto utile ... e nel caso ci rivedremo in altri Argomenti dedicati a soluzioni per temi simili...
.