WebSite X5Help Center

 
Remo D.
Remo D.
User

Fascia orizzontale con immagini scorrevoli  it

Autor: Remo D.
Besucht 60, Followers 1, Geteilt 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?

Gepostet am
7 ANTWORTEN
Giancarlo B.
Giancarlo B.
User

Ciao cosa hai utilizzato per creare questo effetto? stile righe o un oggetto?

Mehr lesen
Gepostet am von Giancarlo B.
Remo D.
Remo D.
User
Autor

Grazie per la risposta. Ho utilizzato stile righe con  elenco immagini e le funzioni estendi e parallasse

Mehr lesen
Gepostet am von Remo D.
Giancarlo B.
Giancarlo B.
User

Lo stile righe non è responsive.

Mehr lesen
Gepostet am von Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Remo D.
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?

... 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User

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.

Mehr lesen
Gepostet am von Giancarlo B.
Roberto M.
Roberto M.
User
 ‪ KolAsim ‪ ‪
Remo D. 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? ... 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 .

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:

  • L'Adattamento statico: Se l'immagine non corrisponde esattamente al rapporto d'aspetto del contenitore, viene inevitabilmente ritagliata o distorta.
  • La Mancanza di consapevolezza del contenuto: Non considera il contenuto visivo o informativo dell'immagine.

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.

Mehr lesen
Gepostet am von Roberto M.
Roberto M.
Roberto M.
User

@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.

Mehr lesen
Gepostet am von Roberto M.