[英]Shrinking background image in sync with Div size reduction
我有一個固定寬度為650px的售票網站,試圖在手機上更好地顯示並做出響應。
預訂系統具有div(由服務器自動生成),該div覆蓋了設置為背景圖像URL的場所圖像。 問題是,如果我將某些div寬度設置為100%(例如容器或背景圖片網址),則所有div都將全部移出位置,並且將無法按照原始設置與固定寬度對齊。
https://jsfiddle.net/04my0hvc/屏幕截圖https://s9.postimg.org/qdh8ihdlr/screenshot.jpg
低於650像素時,Flexbox收縮功能是否可以在這里發揮作用?或者可以使用“縮放”選項?
下面是一些示例代碼,但是我無法完全展示所有代碼,因為大部分也是用於生成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>
使用背景尺寸: 到包含id“ seats”的div
您需要添加一個容器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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.