Сделайте два фоновых изображения отзывчивыми вместе с divs с CSS

Question

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

Я пробовал обложку фона, содержал, 100% и устанавливал другие значения div на 100%, но без радости сохраняя эти места на месте.

Таким образом, не только фоновое изображение необходимо сжимать для сидения ниже 650 пикселей, но и изображения сидений тоже - им необходимо сохранить свое положение на плане места. Содержащиеся divs в настоящее время установлены на 15 пикселей для отображения изображений мест.

Вот оригинальная статическая ширина кода я работаю с https://jsfiddle.net/kjyopdL8/

Размеры сиденья должны быть 15px в размерах, пока seatplan не опускается ниже 650px, то количество мест изображения сжиматься в синхронизации с основным seatplan изображения в то время как оставаясь в том же положении и пропорции

#theatre { 
 
    width: 650px; 
 
    float: left; 
 
    padding-right: 5px; 
 
    margin: 25px 15px 0 10px; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
#bmessage { 
 
    padding: 1px 3px; 
 
    height: 20px; 
 
    font-size: 14px; 
 
    background: #ddf; 
 
    color: #080; 
 
    font-weight: bold; 
 
} 
 
#seats:before { 
 
    content: url('http://i.imgur.com/qn56yss.gif'); 
 
} 
 

 
#seats { 
 
    margin: 10px 0; 
 
    padding: 10px 0; 
 
    position: relative; 
 
} 
 

 
#seats div { 
 
    position: absolute; 
 
    width:15px; 
 
    height:15px; 
 
} 
 

 
#seats .s1.std.grey { 
 
    background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top; 
 
}

<div id="theatre"> 
 
    <div class="container"> 
 
    <div id="bmessage">Select the seats that you need.</div> 
 
    <div id="seats"> 
 
     <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>  
 
     <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div> 
 
     <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>  
 
     <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div> 
 
    </div> 
 
    </div>

Answer 1

theres много ошибок на вашем css. Если вы хотите, чтобы он был отзывчивым, не дайте ширину фиксации на вашем контейнере. ив отредактировали скрипку и пришел с этим: https://jsfiddle.net/kjyopdL8/4/

#seats:before { 
    content: ''; 
    display: block; 
    padding: 50%; 
} 

#seats { 
    margin: 10px 0; 
    padding: 10px 0; 
    position: relative; 
    background-image: url(http://i.imgur.com/qn56yss.gif); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

взглянуть на селекторе псевдо раньше. он сделал трюк!

Answer 2

Этан Маркотт много писал на чужие фоновые изображения. Вы можете прочитать лоты в своем блоге или here..

Вы в основном хотите задать следующие свойства для вас фонового изображения:

1. Установите дисплей свойство элемента #image на встроенный блок. Без этого свойства CSS отобразит элемент <span> как встроенный, и мы не сможем дать ему ширину или (в минуту) высоту.
2. Установите ширину этого элемента на 100%, чтобы наше изображение заполнило содержащее <div>.
3. Установите свойства font-size и line-height в 0, чтобы любое содержимое в пределах диапазона не учитывало его размер.
4. Установите свойство вертикального выравнивания на середину, чтобы вертикально центрировать элемент изображения в содержащем <div>. Установите для свойства background-size значение 100%, чтобы наше изображение заполнило элемент изображения.
5. Установите для свойства background-position 50% 50%, чтобы выровнять фоновое изображение в элементе изображения.
6. Установите для свойства background-repeat значение no-repeat, чтобы браузер не разбивал изображение по горизонтали или по вертикали.

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

Медиа-запросы помогут вам справиться с различными размерами экрана.