與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尺寸縮小同步縮小背景圖像

回答

相關問題