[問題] CSS 背景圖片固定位置與縮放

[KanoLoa (卡)]

各位大大好，小弟是新人，剛入門學習基礎前端css。

實作時想要做出下面效果的時候一直卡住，只好請教各位大大m(_ _)m

補充： 我想要的與這遊戲網站的效果一樣
http://ro.gameflier.com/index.asp

---------------------------


還請看示意圖：

http://imgur.com/f2GEaYo




我有一張背景圖，假設1000px。並且中間有個紅色方格區域約800px。

1. 當瀏覽器的瀏覽寬度小於800px的時候：

   紅色區域的左邊線可以保持對齊瀏覽器的左邊。

   縮放的剪裁區域會從紅色區域右方開始縮減。


2. 當瀏覽器寬度 > 800px ，並且不到1000 px時：

   背景圖能平均至中，超出紅格區域的大小也平均分配在瀏覽器兩端。


-----------------------------------

我本來是在中間做一個div，設定寬度800浮動，即可讓內容達到我要的效果，

但是後面背景圖片就沒辦法做到我要的樣子，卡了一天  orz

希望有空的大大能幫我解惑，非常感謝。



--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 203.73.234.49
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1465785859.A.6D1.html
→ Linux: https://github.com/karacas/imgLiquid 這個或許是你要的？
→ Linux: Demo 頁面 http://goo.gl/Wk8bU
看起來很類似，我研究下怎麼把大大東西轉出來用，感謝。

推 Frozenmouse: 昨天剛好有弄到類似的東西…最後是外層再包個滿版div
→ Frozenmouse: ，把背景移到外面那層，內層的保持寬度並置中來解決
意思是開一層div放背景圖，裡面一層div保持寬度置中即可！？

推 Frozenmouse: 大概這樣 https://jsfiddle.net/1u5ksmpb/
→ Frozenmouse: 不確定符不符合你要的XD 外面放背景的也要設最小寬度
天阿 您完美的解決了 XDDD  太感謝啦
※ 編輯: KanoLoa (203.73.234.49), 06/14/2016 14:19:05