Fascia larga quanto la larghezza del browser 
Author: Franco F.Buongiorno , sto provando a creare una fascia larga quanto la larghezza del browser ma nonostante abbia letto più volte la guida ottengo sempre l’effetto di avere due immagini sovrapposte. Se inserisco l’oggetto immagine nella griglia di creazione della pagina al passo 4 ed estendo la riga a tutta la larghezza, la foto non prende tutta la larghezza. Se provo ad estendere la riga interessata dall’oggetto Immagine anche in “Stile Delle Righe” non accade nulla. Se però, restando sempre in “Stile Delle Righe”, inserisco la stessa immagine dalla lista a discesa Sfondo ed estendo la riga mi appare sia l’immagine che copre l’intera larghezza che una sua replica davanti. Se provo a togliere l’immagine dalla griglia di impaginazione al passo 4 e lasciarla nella lista a discesa Sfondo in “Stile Delle Righe” non vedo più nulla, se invece la rimuovo dalla lista a discesa Sfondo in “Stile Delle Righe” vedo l’immagine ma non occupa tutta la larghezza dello schermo. Ovviamente ho preparato le immagini modificandone le dimensioni a varie larghezze (1600 – 1920 – 2000 px) e risoluzioni ed ovviamente convertendole in WebP per alleggerirle ma il risultato è sempre lo stesso. Da ultimo ho anche provato con la guida “Come si crea una galleria immagini “Full Width” che occupa tutta la larghezza della finestra del browser “ … ma nulla.
1) - l'immagine con oggetto immagine prende tutta la larghezza se le misure orizzontali sono maggiori di quelle del layout, altrimenti prenderà le sue dimensioni massime.
.
.
.
2) - se l'immagine è quella usata come sfondo della riga, questa si estende a tutta larghezza in modalità CSS-COVER, che vuol dire posizione centro/centro con aspetto razionale vignettato sulla priorità Altezza/Larghezza;
... da queste immagini puoi capire cosa si intende per modalità COVER:
... la riga ovviamente deve contenere un oggetto per assumere una Altezza relativa, e se non ci sono oggetti nella griglia della riga, l'immagine di sfondo della riga non si vedrà;
3) - se il tuo intento invece è quello di avere una immagine a tutta larghezza usando lo style delle righe, che hai già provato, e mantenere anche il relativo rapporto RATIO- responsive è molto semplice con una mia pseudo invenzione di 15 anni fa, "Luovo di Colombo", senza codici EXTRA ed alla portata diTUTTI, ...utile per decine di altre applicazioni simili...
... il procedimento sul come fare per ottenere questo risultato che è semplicissimo lo riporto nel prossimo Post...
.
ciao
.
... + ... .. per il .3) ...praticamente devi mettere nella riga un unico oggetto "Oggetto Immagine" con trasparenza sul canale ALPHA "0", completamente trasparente, (o contenente un testo grafico trasparente), esteso per tutta la larghezza, ed anche la riga estesa a tutta larghezza; ...immagine con rapporto razionale congruo con quello della immagine che vuoi usare, per esempio in rapporto (16:9), oppure (3:2), o quello che ti interessa...
... se il rapporto razionale di questa immagine trasparente è diverso da quello della immagine di sfondo, l'immagine di sfondo si adatterà in modalità COVER,
... puoi fare una prova istantanea con la mia immagine (2560x1440 pixel) che vedi qui:
... trovi anche in allegato la stessa immagine da scaricare per le tue prove...
... c'è sempre una prima volta, ...sono sicuro che capirai subito da te cliccando cliccando, ma se ti servono altri aiuti o chiarimenti, avvisami senza problemi...
.
ciao
.
Author
Grazie KolAsim, chiarissimo, esaustivo, risolutivo non solo perchè ho risolto ma soprattutto perchè ho acquisito, o credo di aver acquisito, un concetto importante: che in effetti la dimensione della fascia è sostanzialmente gestita dall'immagine trasparente predisposta ovviamente con rapporto razionale adeguato. GRAZIE !!!!
... ottimo, ... ciao ...
.