根据bootstrap轮播中的屏幕使图像响应

Question

我有一个自举旋转木马，它占据了屏幕的整个宽度和高度。 但是，当屏幕尺寸小于600像素时，它看起来像

显然底部存在差距，我不想要。 在小尺寸（<600px）我希望图像像：

因此没有底部边距，只显示图像的左侧部分。 可以用css实现。我的代码是here。提前致谢。 相关的css和html如下：

<header>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Chania" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Chania" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Flower" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Flower" width="100%" height="100%">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

的CSS：

html
    {height:100%;
        margin:0;
        overflow:hidden;
    }
    body
    {   margin:0;
        height:100%;
    }

    header{

        height:100%;
    }

Answer 1

您可以尝试使用背景图片而不是图片标签（img标签和宽高比存在问题）：

CSS：

.image {
  background-image: url(http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

JS：

$(window).resize(function() {
  $('.item > .image').css('height', $(window).height());
}).trigger('resize');

CODEPEN