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

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

我试过的方法是：

背景位置：封面确实会拉伸，但会随着显示器的宽度而伸缩，从而导致图像移动

并创建了一个带有固定宽度（比如1920像素左右）的内部的背景包装。高度将是固定的

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


HTML:

有没有更有效的方法来解决这个问题
 您想要固定的图像高度还是总窗口高度的某个百分比？
是否要拉伸背景图像

如果没有，你可以用

background-size: auto 100%;

HTML:

背景尺寸
封面
仅在您想拉伸
背景图像时才有用。如果你打算把它放在一个固定大小的容器里，那么无论如何，做你正在做的事情是没有意义的。最好的解决方案可能是以非相对单位定义
背景大小，如
px

因此，解决方案是以如下方式固定宽度：


.background包装器{
左：0px；
顶部：0px；
宽度：100%；
高度：250px；
显示：块；
溢出：隐藏；
背景色：#ccc；
背景图片：url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
背景位置：50%50%；
/*通过定义此选项，当屏幕关闭时，您的图像将被切断
*比1920像素宽，但既然你不想拉伸它
*无论如何都会发生*/
背景尺寸：1920像素自动；
}

？这对您有效的唯一原因是，您的内盒上有一个固定的大小，因此
背景大小：封面
变得无关紧要（因为您的内盒不流动）。您不妨将您的
背景大小定义为
1920px auto
，并完成它……这是一项要求，它需要延伸到设备宽度。没问题，尽管这实际上不符合您对@MustafaSabur评论的要求：“这是一项要求，它需要延伸到设备宽度。”-这不会。如果您需要固定宽度且仅在需要覆盖比可用空间更多的空间时才增加的内容，则您的解决方案与
min width
内框相结合是实现这一点的唯一方法（
min width:1920px；width:100%；背景大小：100%自动；
）。。。
.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;
}

background-size: auto 100%;

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

.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;
}