Allineamento di divs dell'immagine a schermo intero sulla pagina a scorrimento orizzontale

Desidero creare un sito Web a scorrimento orizzontale, con div immagini a schermo intero. Le div conterranno testo, motivo per cui ho usato le immagini di sfondo. Non riesco a trovare un modo, per posizionare i div esattamente l'uno accanto all'altro.Allineamento di divs dell'immagine a schermo intero sulla pagina a scorrimento orizzontale

Ho provato galleggiante e inline-block, ma o non ha funzionato o div non ha allineato correttamente.

Ho fatto un jsfiddle per mostrare il mio codice. L'obiettivo è ottenere "A" accanto a "B".

Here's the fiddle link

<div class="a">Text</div> 
<div class="b">Text</div>

Grazie!

UPDATE - l'altezza dell'immagine deve essere al 100%. Sul sito web verranno utilizzati più di due div e saranno tutti di larghezza variabile. Here's a sketch of what I try to achieve

fonte

2015-12-24 Casper

Questa è una domanda fantastica! – www139

hai provato la mia risposta? –

Grazie @ www139! Spero troveremo una bella soluzione! – Casper

Inserisci display:inline-block nelle classi .a and .b.

.a, 
.b { 
    width: 100%; 
    height: 100%; 
    vertical-align: top; 
    background-size: contain; 
    background-repeat: no-repeat; 
    display:inline-block; 
}

Ecco la Updated Fiddle

fonte

2015-12-24 05:28:00

Ho provato a ridimensionare la mia finestra, i 'divs 'sono uno accanto all'altro con una scroll orizzontale. Puoi dirmi cosa non funziona se la finestra viene ridimensionata, in modo da poter correggere la mia soluzione. –

Grazie per il tuo input @Alorika, ho provato anche questo metodo, e il problema è che non è reattivo, quando si ridimensiona. Le lacune sono quasi inevitabili. Ci sono alcuni trucchi per rimuoverli, ma in realtà non funzionano in tutti gli scenari. – Casper

@Casper È importante notare che in genere gli utenti non ridimensionano la finestra. Funziona se si aggiorna tra il ridimensionamento. – Bakitai

Aggiornato il giorno prima di Natale :) Usa dimensioni sfondo (se la posizione dell'immagine è inclinata, è possibile utilizzare la posizione di fondo).

In realtà non è possibile che l'immagine copra l'intera immagine senza che venga tagliata da qualche parte o distorta la proporzione dell'immagine (creando un'immagine sfocata e sfocata). La soluzione migliore è far sì che l'immagine copra l'area di visualizzazione con alcuni lati tagliati e quindi centrare il soggetto dell'immagine con background-position:x(%);.

Il sito Web "di introduzione" di Google Drive sembra avere il comportamento che si sta cercando con le immagini. Dai un'occhiata al primo "pannello" e agli stili applicati con l'immagine di sfondo. E 'questo quello che vuoi? Sembra abbastanza vicino.

Per sperimentare un comportamento di sfondo diverso, suggerisco di controllare questa pagina di gioco http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=200px.

Prova questo :)

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    overflow-x: scroll; 
 
    /*remove annoying margin created by display:inline-block;*/ 
 
    font-size: 0; 
 
} 
 
.a, 
 
.b { 
 
    width: 100%; 
 
    height: 100%; 
 
    vertical-align: top; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    -o-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -ms-background-size: cover; 
 
    background-size: cover; 
 
    background-position:center center; 
 
} 
 
.a { 
 
    background-image: url(http://i66.tinypic.com/2wqv7fd.jpg); 
 
} 
 
.b { 
 
    background-image: url(http://i67.tinypic.com/2lborxv.jpg); 
 
}

<body> 
 

 
    <div id="wrapper"> 
 

 
    <div class="a">Text</div> 
 
    <div class="b">Text</div> 
 

 
    </div> 
 

 
</body>

fonte

2015-12-24 05:29:15 www139

Grazie per il tuo input @ www139, questo metodo è in realtà molto simile a quello che voglio ottenere. Tuttavia, ho bisogno che le immagini siano completamente visibili in altezza. – Casper

Utilizzando inline-block senza spazio bianco si basa sul codice HTML non avere spazi tra due elementi. <div class="a">Text</div> <div class="b">Text</div> risulterebbe in uno spazio tra i due div.

Per ottenere un'immagine di sfondo che riempi la larghezza e l'altezza di un div, è possibile utilizzare background-size: 100% 100%; background-position:center;. In alternativa, possiamo usare background-size:cover; se vogliamo che l'immagine di sfondo venga ritagliata anziché allungata.

AGGIORNATO Fiddle: https://jsfiddle.net/v2wxv73e/2/

#wrapper { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    overflow-x: scroll; 
} 

.a, 
.b { 
    width:100%; 
    height:100%; 
    background-size: 100% 100%; 
    background-position:center; 
    background-repeat: no-repeat; 
    display:inline-block; 
}

PRECEDENTE RISPOSTA:

Usa float:left e width:50%; quando #wrapper ha width: 200%.

Fiddle: https://jsfiddle.net/v2wxv73e/

fonte

2015-12-24 05:31:55 RepeatQuotations

Funzionerebbe solo se ci fossero due div. Funziona per l'OP ma potrebbe non essere la migliore idea a lungo termine (+1 in ogni caso :)) – www139

Vero! Sicuramente è una buona idea notare che questo si basa su una conoscenza statica del numero di div di contenimento o sull'aggiornamento di entrambi i contenuti e delle div interne con javascript di conseguenza, che non è l'ideale. Cheers @ www139 – RepeatQuotations

Grazie per il tuo input @RepeatQuotations, ho aggiunto ulteriori dettagli nel post. Ci saranno più di due div sul sito finale. Essi variano in larghezza e dovrebbero avere il 100% in altezza. Qualche idea su come potrei arrivare a quello? Mi scuso per la mancanza di informazioni. – Casper

ho risolto il problema, cambiare la vostra css con il seguente: -

html, 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    overflow-x: scroll; 
} 

.a, 
.b { 
    display:inline-block; 
    width: 100%; 
    height: 100%; 
    vertical-align: top; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

.a { 
    background-image: url(http://i66.tinypic.com/2wqv7fd.jpg); 
} 

.b { 
    background-image: url(http://i67.tinypic.com/2lborxv.jpg); 
}

Può esserti d'aiuto.

fonte

2015-12-24 05:44:26

Grazie per il tuo input @Harsh Sanghani, ho provato anche questo metodo, e il problema è che ci sono degli spazi bianchi tra le immagini. Sono quasi inevitabili. Ci sono alcuni trucchi per rimuoverli, ma in realtà non funzionano in tutti gli scenari. – Casper

ha risolto il problema? –

Ho aggiornato la mia risposta che non ha alcun vuoto bianco tra le immagini, per favore riprova. –

Allineamento di divs dell'immagine a schermo intero sulla pagina a scorrimento orizzontale

risposta

Problemi correlati