CSS 图像背景 - 跨不同设备的相同比例

Question

我正在尝试创建一个网站，其中可能包含多个流畅的背景部分，这些部分在移动设备、平板电脑和台式机之间的规模是一致的（包括不同的分辨率）。背景将保持在中心以覆盖整个区域，并在所有设备类型中以相同的比例显示。

我尝试过的事情是：background-position: cover 会拉伸但会随着显示器宽度缩放，从而导致图像移动。

并创建了一个背景包装器，其内部部分的固定宽度约为 1920 像素。高度是固定的。

此时效果最好的是具有指定宽度的包装器内的背景。

https://jsfiddle.net/dy6ab36y/

HTML：

<div class="background-wrapper">
  <div class="background-inner"></div>
</div>

CSS：

.background-wrapper {
 left: 0px;
 top: 0px;
 width: 100%;
 height: 250px;
 display: block;
 overflow: hidden;
}

.background-inner {
 width: 1920px;
 left: 50%;
 margin-left: -960px;
 position: absolute;
 height: 250px;
 display: block;
 background-position: 50% 50%;
 background-size: cover;
}

有没有更有效的方法来解决这个问题？

Answer 1

背景大小cover 仅在您想拉伸background-image 时才有用。如果你无论如何都要把它放在一个固定大小的容器中，那么无论如何做你正在做的事情是没有意义的。最好的解决方案可能很简单，就是在非相对单元中定义 background-size，例如 px。

所以解决办法是用这样的方式固定宽度：

.background-wrapper {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 250px;
    display: block;
    overflow: hidden;
    background-color:#ccc;
    background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
    background-position: 50% 50%;
    /* By defining this, your image _will_ be cut off when the screen is
     * wider than 1920px, but since you don't want to stretch this would
     *  happen anyway. */
    background-size: 1920px auto;
}

<div class="background-wrapper">
</div>

Answer 2

HTML：

<div class="background-inner">
</div>

CSS：

.background-inner {
    height: 250px;
    width:100%;
    display: table;
    background-position: 50%;
    background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
    background-repeat: no-repeat;
}

https://jsfiddle.net/dy6ab36y/8/

Answer 3

您想要固定的图像高度还是总窗口高度的某个百分比？ 是否拉伸背景图片？

如果没有，你可以使用

background-size: auto 100%;