Как сделать полноэкранное изображение на бутстрапе?

Question

Вот пример: https://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/

В примере есть целевая страница фона, который заполняет ширину окна просмотра, не занимает ширину всей страницы, и отзывчиво. Как вы используете бутстрап для копирования кода таким образом?

Answer 1

Вы можете использовать это, чтобы заполнить этот тег:

-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 

Answer 2

Основываясь на этом article, вы просто должны определить DIV с идентификатором и поместить изображение внутри как это:

<div id="bg"> 
    <img src="yourimg.jpg" alt=""> 
    </div> 

и затем введите следующие стили:

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 

    /* Preserve aspet ratio */ 
    min-width: 100%; 
    min-height: 100%; 
} 


.back { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 

} 

Это должно сделать трюк. Вы можете видеть это в действии и играть here(для просмотра в полноэкранном режиме просто нажмите стрелку в правом углу рядом с «Автозапуск js»).