Установка 100% экрана на нескольких разрешениях

Question

я работаю на сайте http://204.44.67.143/datacenter/

Я хочу, чтобы установить большое изображение, чтобы быть 100% высоты монитора пользователь просматривает, я имею пытался просто поставить высоту: 100%; но после этого он не показывался, может ли кто-нибудь дать мне руку?

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="images/background.jpg" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Welcome to WebXury</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div><!-- /.carousel --> 

CSS

/* Carousel base class */ 
.carousel { 
    height: 900px; 
margin-bottom: 0px; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 900px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 900px; 
} 

Когда я изменяю высоту до 100%, что не отображаются Atall, поэтому я использую 900px атм, но, как вы можете себе представить, что не заполнит весь на некоторых более высоких разрешениях.

Answer 1

Изменения CSS для карусели:

Я адаптировал свой код в тесте и получил изображение, чтобы растянуть экран шириной ан высокого

.carousel-inner > .item { 
    position: absolute; 
    background:#040; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-image: url(background.jpg); 
    background-size: cover; 
} 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Welcome to WebXury</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div><!-- /.carousel --> 

Поместите изображение в качестве фона и использовать background-size для CSS , Возможно, вам придется немного поменять сценарий слайдов карусели, но вы получите растяжение.

Answer 2

Проверьте мой old answer аут:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#box1 { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    color: white; 
 
    background-color: red; 
 
} 
 

 
#box2 { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    color: white; 
 
    background-color: blue; 
 
}

<div id="box1">HELLO HELLO THIS IS RED BOX, ARE YOU HEARING ME BLUE?</div> 
 
<div id="box2">YES, RED, I'VE GOT YOU LOUD AND CLEAR. OVER. <div>

Вы можете применить то же самое для изображения.