Попытка получить фоновое изображение, чтобы оно оставалось «статичным» для всех размеров монитора и устройства.

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