尝试让背景图像在所有显示器和设备大小中保持“静态”

Question

我发现了下面关于堆栈溢出的代码，希望能有一些清晰的地方。我正在更新我的文件夹页面，并想放一个风景图像背景，但它在我的笔记本电脑上的外观(我想让它看起来的方式)不能转换到我的第二个显示器，它要大得多。如果我实现类似于下面代码的东西，这是否有助于缓解这个问题，这样我就可以确保我的页面在所有场景中都是相同的？

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

Answer 1

你可以在一个简单的全屏背景图片的例子中尝试一下。可以编辑min-height值以获得所需的效果。

示例：https://codepen.io/brooksrelyt/pen/REzMZW

HTML：

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');" ></div>

CSS：

.full-home {
    width: 100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
    background-size: cover;
    min-height: 100vh;
}