html - 根据 Bootstrap 轮播中的屏幕使图像响应

Question

我有一个 Bootstrap 轮播，它占据了屏幕的整个宽度和高度。然而，当屏幕尺寸小于 600px 时，它看起来像

显然底部有缝隙，这是我不想要的。在小尺寸(<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