2

我正在使用 Bootstrap 的示例 'carousel.css 和 html' 使用图像大小 1500x500

如果浏览器窗口变得小于图像，我如何保持图像的高度，并且在不扭曲图像的情况下从每一侧裁剪等量，使高度保持在 500 像素？

这是 Bootstrap 提供并且我正在使用的相关 CSS。

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

这是HTML：

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="images/1600x500.png" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Heading</h1>
          <p>Text text text.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
        </div>
      </div>
    </div>

先感谢您。我已经搜索了这个论坛以及其他论坛，但似乎无法破解这个。听起来很简单。

4

0 回答 0