Как разместить изображения вокруг обертки без активации горизонтальной полосы прокрутки

У меня есть веб-страница внутри контейнера с фиксированной шириной с фиксированной шириной (обертка) и нужно каким-то образом разместить фоновые изображения вокруг (с левой и правой стороны обертки), как показано на этом изображении:Как разместить изображения вокруг обертки без активации горизонтальной полосы прокрутки

enter image description here

важно не активировать горизонтальную полосу прокрутки, если окно браузера слишком мало, чтобы отобразить все фоновые изображения, вместо этого он должен скрыть часть изображений на оба сторонах.

Моя текущая обертка определяется следующим образом (но может изменить его в случае необходимости):

.wrapper { width:1000px; margin:0 auto;}

Я видел его на много сайтов, есть ли не-ум способ для достижения этой цели?

источник

2015-05-13 Incredible

мы можем видеть ваши настройки HTML? вы используете фоновые изображения или теги ? скрипка была бы приятной –

Я буду использовать теги или фоновые изображения, которые будут работать для этого. – Incredible

вы всегда можете просто скрыть переполнение: [https://jsfiddle.net/svArtist/p6krkc6f/] (https://jsfiddle.net/svArtist/p6krkc6f/) ... это сделает трюк для вас? –

Я думаю, из того, что я понимаю, что отзывчивость является для вас ключом. Вместо этого почему бы не подумать об использовании двух абсолютно позиционированных div? Вы можете сделать их полностью отзывчивыми, легко используя преимущество background-image: cover.

См скрипку: http://jsfiddle.net/jsn3gpLn/1/

HTML:

<div class="images"> 
    <div class="container"> 
    </div> 
</div>

CSS:

.images { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: blue; 
    padding: 0; 
    margin: 0; 
    background-image: url('http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg'); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

.container { 
    width: 80%; 
    height: 80%; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    background: red; 
    left: 10%; 
    top: 10%; 
}

источник

2015-05-13 18:02:34

Это не совсем то, что я имею в виду, потому что мне нужно 2 изображения, а не только одно. Вот как это делается: https://jsfiddle.net/p6krkc6f/4/ – Incredible

Я думаю, вы могли бы добавить фоновое изображение в тег тела, а затем установить background- размер для покрытия. Фоновое изображение не активирует никаких полос прокрутки. ,

body { 
    background-image:url("image.jpg"); 
    background-size:cover; 
    background-repeat:no-repeat; 
}

источник

2015-05-13 18:08:32 Skedsmo

Я нашел решение благодаря @Ben Filip комментарий:

html { 
background-color:#eee; 
overflow-x:hidden; 
} 

#wrapper { 
width:200px; 
margin:0 auto; 
background-color: #fda; 
height: 350px; 
position:relative; 
text-align:center; 
} 
#wrapper:before{ 
position:absolute; 
left:0; top:20px; 
margin-left: -182px; 
content:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSu4GtZT0CIzTZmle8ARJUnwxKgd_0QKzmNt4KqRlAsL04devgFMw); 
} 

#wrapper:after{ 
position:absolute; 
right:0; top:20px; 
margin-right: -182px; 
content:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSu4GtZT0CIzTZmle8ARJUnwxKgd_0QKzmNt4KqRlAsL04devgFMw); 
}

https://jsfiddle.net/p6krkc6f/4/

источник

2015-05-14 11:25:54 Incredible

Как разместить изображения вокруг обертки без активации горизонтальной полосы прокрутки

ответ

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