在调整大小和居中的背景图像上溢出？

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/，所有你需要做的就是改变你想要的实际尺寸。