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/，您只需更改所需的实际尺寸。

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

1 个答案: