在調整大小和居中的背景圖像上溢出？

Question

在一個頁面網站的第一頁/標題上，我有一個雙臂伸向兩側的人的肖像。這幅肖像居中並拉下到第一頁/頁眉的底部。所有的工作都很好，但是當我將窗口大小調整爲移動設備的大小時，肖像變得太小，因爲'background-size：cover'值會使其調整大小。

有沒有辦法讓肖像變小到某個窗口寬度，然後從中溢出進入關閉，同時保持居中？ 'min-width'使其只溢出到窗口的右側而不再居中。

我希望它溢出，因爲在移動設備上伸出來的手臂不必是可見的，但肖像的其餘部分應該是可見的。圖像應該保持高度約70％的窗口高度。

HTML：

<div id="container"> 
    <div id="cont-pic"> 
     <div id="pic"> 
     </div> 
    </div> 
</div> 

CSS：

#container { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: red; 
} 

#cont-pic { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    bottom: 0px; 
    overflow: hidden; 
} 
#pic { 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 70%; 
    margin: 0 auto; 
    background: url('img/pic.png') no-repeat center bottom; 
    background-size: contain; 
} 

這裏是一個DEMO。試想一下，翅膀是伸出來的手臂，不必在移動設備上可見。

Answer 1

也許你可以用媒體查詢來做到這一點，如果你知道你想要的最小寬度。然後你可以設置一個固定的大小。

@media screen and (max-width:480px) { 
    #pic { 
    background-size:350px 100%; 
    } 
} 

檢查它這裏的代碼http://jsfiddle.net/8QbXe/15/，所有你需要做的就是改變你想要的實際尺寸。