css - 试图让背景图像在所有显示器和设备尺寸上保持 'static'

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