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

时间:2015-06-23 14:01:11

标签: html css css3

我正在尝试创建一个网站,其中可能存在多个流畅的背景部分,这些部分在移动设备,平板电脑和桌面设备(包括不同的分辨率)之间保持一致。背景是留在中心以覆盖整个区域,并在所有设备类型中以相同的比例显示。

我尝试过的事情是: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;
}

有更有效的解决方法吗?

3 个答案:

答案 0 :(得分:1)

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/

答案 1 :(得分: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>

答案 2 :(得分:0)

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

如果没有,你可以使用

background-size: auto 100%;