Как центрировать обрезку фонового изображения на полный экран

Question

Переполнение стека, похоже, полон подобными вопросами, но я не нашел удовлетворительного ответа для моего варианта использования. В принципе, мне нужно отзывчивое полноэкранное фоновое изображение для верхней части моей первой страницы. Средства, сужающие окно просмотра, приводят к обрезке, а не растяжению; изображение должно быть центрировано. Я хотел бы избежать JS для этого.

Aaron создал fiddle, который почти похож на то, что я ищу. Две проблемы:

• Странное поведение при сужении окна просмотра (ниже 500px ширина)
• position: fixed;

я смог воспроизвести solution of Bryce Hanscomb and Gabriela Gabriel для контейнера (см my fiddle):

Но я не смог расширить его до полного экрана. Это мой код (см fiddle):

HTML:

<div id="background"> 
    <img src="//dummyimage.com/600x200/0099cc/fff.png" /> 
</div> 

CSS:

div#background { 
    background-color: orange; 
    min-height: 100%; 
    min-width: 100%; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    z-index: -1; 
} 
img { 
    left: 50%; 
    position: relative; 
    transform: translate(-50%, 0); 
    min-height: 100%; 
    min-width: 100%; 
} 

Проблема № 1: Изображение не занимает полный высота его родительского div (с min-height установлена ​​в 100%).

Проблема # 2 + # 3: В узком окне проекции, изображение обрезается справа (не по центру), а горизонтальная полоса прокрутки отображается.

---

Как примечание стороны, может кто-нибудь сказать мне where those 4 pixels come from?

Answer 1

Ваше изображение будет заполнять все пространство, а также не имеют проблему не по центру, если вы используете position:absolute на изображении

div#background { 
    background-color: orange; 
    min-height: 100%; 
    min-width: 100%; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    z-index: -1; 
} 
img { 
    left: 50%; 
    position: absolute; 
    transform: translate(-50%, 0); 
    min-height: 100%; 
    min-width: 100%; 
} 

Answer 2

Вопрос с 4px на дне, потому что изображения всегда выровнены по сверху точно так же, как текст, это также добавляет немного отступов к основанию, чтобы сделать исходный текст для текста, чтобы буквы могли свисать под остальными.

Если установить vertical-align: bottom он должен исправить это следующим образом:

h1 { 
 
    text-align: center; 
 
} 
 
div#container { 
 
    background-color: black; 
 
    height: 200px; 
 
    width: 100%; 
 
    margin: 50px auto; 
 
} 
 
div#content { 
 
    background-color: orange; 
 
    min-width: 100%; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    left: 50%; 
 
    position: relative; 
 
    transform: translate(-50%, 0); 
 
    vertical-align: bottom; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    <img src="//dummyimage.com/600x200/0099cc/fff.png" /> 
 
    </div> 
 
</div>

для центра выравнивания изображения, я бы лично рекомендую на самом деле с помощью CSS background-image, а затем установив background-position как так:

div#background { 
 
    background-color: orange; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: -1; 
 
    background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat; 
 
    background-size: cover; 
 
}

<div id="background"> 
 
</div>