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

我有一个固定宽度为650px的票据站点，我试图在移动设备上进行更好的显示并做出响应。与Div尺寸缩小同步缩小背景图像

预订系统有div（由服务器自动生成）覆盖设置为背景图像url的场地图像。问题是如果我将某些div宽度设置为100％（例如容器或背景图像url），则所有div都将不在位，并且不会按原始设置与固定宽度对齐。

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

能Flexbox的收缩来这里发挥作用，或者缩放选项变得低于650像素的时候？

一些示例代码在下面，但我无法完整地显示所有的代码，因为批量是Javascript用于生成我也无法访问的div。但请参阅上面的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>

来源

2016-10-25 me9867

什么容器？如果容器比图像大，内容将调整为容器而不是背景图像。也许设置另一个容器的背景图像的宽度？ –

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

来源

2016-10-25 13:17:52

我认为这会比我想象的更加复杂，divs被设置为绝对，所以留在他们所在的位置。如果设置为相对他们去所有地方http://i.imgur.com/UjyQvIE.jpg – me9867

如果将父元素设置为相对，则它们将定位到该容器并保持原位？ –

即使座位在px中设置为绝对值？ – me9867

使用background-size：contains;到包含一个ID“座位”的div

来源

2016-10-25 13:10:06

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

回答

相关问题