Fascia orizzontale con immagini scorrevoli
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
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.