1

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

有没有办法让肖像变小直到一定的窗口宽度，然后在保持居中的同时溢出到关闭？'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;
}

这是一个演示。想象一下，翅膀是伸展的手臂，不必在移动设备上可见。

4

1 回答 1

1

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

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

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

于 2013-10-21T19:55:03.633 回答