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

Question

在单页网站的第一页/标题上，我有一张双臂伸向两侧的人的肖像。此肖像居中并下拉到第一页/标题的底部。一切正常，但当我将窗口调整为移动设备的大小时，肖像变得太小，因为“背景大小:封面”值使其调整大小。

有没有办法让肖像变小直到达到一定的窗口宽度，然后在保持居中的同时溢出到关闭？ 'min-width' 使其仅溢出到窗口的右侧而不再居中。

我希望它溢出，因为在移动设备上，拉伸(stretch)的 ARM 不必可见，但肖像的其余部分应该可见。图像的高度应保持在窗口高度的 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 .想象一下，翅膀是伸出的 ARM ，不必在移动设备上可见。

Answer 1

如果您知道所需的最小宽度，也许可以使用媒体查询来实现。然后你可以设置一个固定的大小。

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

在这里查看代码 http://jsfiddle.net/8QbXe/15/ ，您所要做的就是更改您想要的实际尺寸。