如何使Bootstrap Carousel保持图像宽高比？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

• Maintain image aspect ratio in carousel 8 answers

在转盘8答案中保持图像宽高比

Currently I am using the out of the box carousel from the Bootstrap template and it works great, however, when I add an image and resize the browser window it does not maintain the image aspect ratio...rather it squishes the image horizontally.

目前我正在使用Bootstrap模板中开箱即用的旋转木马并且效果很好,但是,当我添加图像并调整浏览器窗口大小时,它不会保持图像宽高比...而是水平地搜索图像。

Now I have tried many variations to maintain the image aspect ratio as the window is resized and the following code is the closest I've gotten. That being said, this code does maintain the aspect ratio but when the window is resized to a mobile phone size, the image height is basically 50px and you cant tell what the image is.

现在,我已经尝试了许多变体来维护图像宽高比,因为窗口调整大小,以下代码是我得到的最接近的代码。话虽这么说,这段代码确实保持了宽高比,但是当窗口大小调整为手机大小时,图像高度基本上是50px,你不能告诉图像是什么。

What I would like to have is for the carousel to behave like the one on this website when you resize the browser: http://teekay.com/

我想要的是,当您调整浏览器大小时,轮播的行为与本网站上的轮廓相似:http://teekay.com/

My current code: Carousel:

我目前的代码:Carousel:

<!-- carousel-->
    <div id="myCarousel" data-ride="carousel" class="carousel slide">
      <!-- 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>
      </ol>
      <div role="listbox" class="carousel-inner">
        <div class="item active"><img src="../images/carousel_resize_3.jpg" alt="First slide" class="img-responsive"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text1</h1>
              <p></p>
              <p><a href="/login" role="button" class="btn btn-lg btn-warning">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item"><img src="../images/carousel_resize_1.jpg" alt="Second slide" class="second-slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text2</h1>
              <p></p>
              <p><a href="#moreInfo" role="button" class="btn btn-lg btn-warning">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item"><img src="../images/carousel_resize_2.jpg" alt="Third slide" class="third-slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>text3</h1>
              <p></p>
              <p><a href="#appInfo" role="button" class="btn btn-lg btn-warning">Browse jobs</a></p>
            </div>
          </div>
        </div>
      </div><a href="#myCarousel" role="button" data-slide="prev" class="left carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a href="#myCarousel" role="button" data-slide="next" class="right carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
    </div>
    <!-- /.carousel-->

My CSS:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  /*height: 500px;*/
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

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

I have tried the answers in many Stack Overflow posts but I cant seem to get the carousel to shrink but also maintain the aspect ratio. What am I missing?

我已经在许多Stack Overflow帖子中尝试了答案,但我似乎无法让旋转木马缩小,但也保持纵横比。我错过了什么?

Thanks for the help!

谢谢您的帮助!

EDIT:

I managed to get it to maintain the aspect ratio with the following code, but now the carousel is not getting smaller as a whole when the browser is resized, any ideas how to do this?

我设法通过以下代码来保持宽高比,但是现在当浏览器调整大小时,旋转木马整体上没有变小,任何想法如何做到这一点?

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: 500px;
}

img {
    height: 500px;
    width: 1920px;
    /*object-fit: contain;*/
    object-fit: cover;
}

1 个解决方案

#1

Carousel images are responsive by default in latest Bootstrap 3 { display: block; max-width: 100%; height: auto; }. So, there is no need to add an .img-responsive class to your images. (Also, there is no need to wrap the .carousel-caption in a .container)

在最新的Bootstrap 3中,轮播图像默认是响应的{display:block;最大宽度:100%;身高:自动; }。因此,无需为图像添加.img响应类。 (另外,没有必要将.carousel-caption包装在.container中)

If you start with the sample markup here and remove your extra style overrides, you can see that the aspect ratio is properly maintained on different screen sizes. You can verify this using the same link above.

如果您从这里开始使用示例标记并删除多余的样式覆盖,您可以看到在不同的屏幕尺寸上正确维护了宽高比。您可以使用上面的相同链接验证这一点。