与 Div 尺寸缩小同步缩小背景图像

Question

我有一个固定宽度为 650 像素的票务网站，我试图在手机上更好地显示并做出响应。

预订系统有 div（由服务器自动生成）覆盖设置为背景图像 url 的场地图像。问题是，如果我将某些 div 宽度设置为 100%，例如容器或背景图像 url，那么所有 div 都会不合适，并且不会像最初设置的那样与固定宽度对齐。

https://jsfiddle.net/04my0hvc/ 截图https://s9.postimg.org/qdh8ihdlr/screenshot.jpg

flexbox 缩小是否可以在这里发挥作用，或者当低于 650 像素时可能是缩放选项？

下面是一些示例代码，但我无法完全展示所有代码，因为大部分代码是用于生成我无法访问的 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

使用 background-size: contains; 到包含 id "seats" 的 div

Answer 2

您需要添加一个容器 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;
}

更新

将background-size 属性设置为contain