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 atm但是你可以想象它不会在一些更高的分辨率上填满整个页面。

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>

您可以为图像应用相同的内容。

在多个分辨率下将图像高度设置为屏幕的100％

2 个答案: