Divの縮小と同期して背景画像を縮小する

Question

固定幅の650pxのチケットサイトを持っています。私は携帯電話でよりよく表示しようとしています。

予約システムには、バックグラウンド画像URLとして設定された会場イメージの上にdivs（サーバーによって自動生成された）があります。問題は、コンテナや背景の画像URLなどのdivの幅を100％に設定した場合、すべてのdivがすべて元の位置に戻って固定幅に対して元々設定されていないことです。

https://jsfiddle.net/04my0hvc/ スクリーンショットhttps://s9.postimg.org/qdh8ihdlr/screenshot.jpg

は650pxの下に行くときここに遊びに来縮小、または多分ズームオプションフレキシボックスもらえますか？

以下のサンプルコードは一部ですが、私がアクセスできないdivを生成するために使用されるJavascriptであるため、すべてのコードを完全に表示することはできません。しかし、上記のJSFiddleとスクリーンショットをご覧ください。

<div id="theatre"> 
     <div id="bmessage">Select the seats that you need.</div> 
     <div id="seats" style="height:650px;background: url('http://i.imgur.com/qn56yss.gif') no-repeat center top;"><div class="s1 std grey" si="0" title="A16" style="top:75px; left:233px;"></div><div class="s1 std grey" si="1" title="A15" style="top:75px; left:251px;"></div><div class="s1 std grey" si="2" title="A14" style="top:75px; left:269px;"></div><div class="s1 std grey" si="3" title="A13" style="top:75px; left:287px;"></div></div> 

Answer 1

コンテナdivを追加して、背景画像background-sizeの値をcontainに設定する必要があります。

JSFiddle：https://jsfiddle.net/04my0hvc/1/

HTML

<div id="theatre"> 
<div class="container"> 
    <div id="bmessage">Select the seats that you need.</div> 
    <div id="seats" style="height:650px;background: url('http://i.imgur.com/qn56yss.gif') no-repeat top left; background-size: cover"> 
    <div class="s1 std grey" si="0" title="A16" style="top:75px; left:233px;"></div>  
    <div class="s1 std grey" si="1" title="A15" style="top:75px; left:251px;"></div> 
    <div class="s1 std grey" si="2" title="A14" style="top:75px; left:269px;"></div>  
    <div class="s1 std grey" si="3" title="A13" style="top:75px; left:287px;"></div> 
</div> 
</div> 

CSS

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

.img-responsive { 
    max-width: 100%; 
    height: auto; 
} 

UPDATE

background-sizeプロパティをcontain

Answer 2

使用バックグラウンドサイズ：含む;のidに "seat"というIDが含まれている