Выравнивание полноэкранных изображений divs на горизонтальной прокрутке страницы

Я хочу создать горизонтальный прокручиваемый веб-сайт с полноэкранными изображениями div. В divs будет содержаться текст, поэтому я использовал фоновые изображения. Я не могу найти способ, чтобы расположить divs аккуратно рядом друг с другом.Выравнивание полноэкранных изображений divs на горизонтальной прокрутке страницы

Я попытался поплавок и встроенный блок, но либо он не работает или дивы не выравнивать должным образом.

Я сделал jsfiddle, чтобы показать свой код. Цель состоит в том, чтобы получить «A» рядом с «B».

Here's the fiddle link

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

Спасибо!

ОБНОВЛЕНИЕ - высота изображения должна быть 100%. На веб-сайте будет использовано более двух разделов, и все они будут различаться по ширине. Here's a sketch of what I try to achieve

источник

2015-12-24 Casper

Это удивительный вопрос! – www139

вы попробовали мой ответ? –

Спасибо @ www139! Надеюсь, мы найдем хорошее решение! – Casper

Положить display:inline-block на свои классы .a and .b.

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

Вот Updated Fiddle

источник

2015-12-24 05:28:00

Я попытался изменить размер моего окна, 'divs' находятся рядом друг с другом с горизонтальным прокруткой. Не могли бы вы рассказать мне, что не получается, если изменить размер окна, чтобы я мог исправить свое решение. –

Спасибо за ваш вход @Alorika, я тоже пробовал этот метод, и проблема в том, что при изменении размера он не реагирует. Пробелы почти неизбежны. Есть некоторые трюки, чтобы удалить их, но они не работают в каждом сценарии. – Casper

@Casper Важно отметить, что пользователи обычно не изменяют размер окна. Он работает, если вы обновляете промежуточный размер. – Bakitai

Обновлено день перед Рождеством :) Использовать фоновый размер (если положение изображения искажены, вы можете использовать положение фона).

На самом деле нет возможного способа получить изображение, чтобы покрыть всю вещь без того, чтобы она где-то обрезалась или искажала пропорцию изображения (создавая плохое, размытое изображение). Лучше всего получить изображение, чтобы покрыть область просмотра, а некоторые срезы отрезаны, а затем центрируйте объект изображения с помощью background-position:x(%);.

Веб-сайт «Ввод» на Google Диске, похоже, имеет поведение, с которым вы сталкиваетесь с изображениями. Взгляните на первую «панель» и стили, применяемые с фоновым изображением. Это то, что вы хотите? Это кажется довольно близким.

Чтобы поэкспериментировать с различным поведением в фоновом режиме, я предлагаю вам проверить эту страницу воспроизведения - это страница http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=200px.

Попробуйте это :)

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>

источник

2015-12-24 05:29:15 www139

Спасибо за ваш вход @ www139, этот метод на самом деле довольно близок к тому, чего я хочу достичь. Тем не менее, мне нужно, чтобы изображения были полностью видимыми по высоте. – Casper

Используя встроенный блок без белого пространства опирается на HTML разметка не имеющие пробелы между двумя элементами. <div class="a">Text</div> <div class="b">Text</div> приведет к пробелу между двумя div.

Чтобы получить фоновое изображение, заполняющее ширину и высоту div, мы можем использовать background-size: 100% 100%; background-position:center;. В качестве альтернативы мы можем использовать background-size:cover;, если мы хотим, чтобы фоновое изображение обрезалось, а не растягивалось.

ОБНОВЛЕНО 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; 
}

ПРЕДЫДУЩИЙ ОТВЕТ:

Использование float:left и width:50%; когда #wrapper имеет width: 200%.

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

источник

2015-12-24 05:31:55 RepeatQuotations

Это будет работать, только если есть два div. Работает для OP, но может не быть лучшей идеей в долгосрочной перспективе (+1 в любом случае :)) – www139

True! Определенно, хорошая идея отметить, что это зависит от статического знания содержащего числа divs - или обновления как содержащихся, так и внутренних div с javascript соответственно, что не является идеальным. Cheers @ www139 – RepeatQuotations

Спасибо за ваш ввод @RepeatQuotations, я добавил еще несколько деталей в сообщение. На последнем сайте будет больше двух разделов. Они будут различаться по ширине и должны иметь 100% высоты. Любая идея, как я могу это сделать? Прошу прощения за отсутствие информации. – Casper

Я решил проблему, измените css со следующими: -

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); 
}

Это может вам помочь.

источник

2015-12-24 05:44:26

Спасибо за ваш вход @Harsh Sanghani, я тоже пробовал этот метод, и проблема в том, что между изображениями есть белые промежутки. Они почти неизбежны. Есть некоторые трюки, чтобы удалить их, но они не работают в каждом сценарии. – Casper

решил вашу проблему? –

У меня есть обновленный ответ, который не имеет никакого белого промежутка между изображениями. Повторите попытку. –

Выравнивание полноэкранных изображений divs на горизонтальной прокрутке страницы

ответ

Смежные вопросы