如何使bootstrap轮播图像响应？

Question

我想保持相同的图像比例.问题是当浏览器很宽时它会拉伸.当它减少时会发出吱吱声.

我在这里检查了所有的问题,但大多数都没有帮助我.

这是标记:

<!-- Carousel
================================================== -->
<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>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

---

这是CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

我试图制作一个jsfiddle,但我不能在这里链接到http://maanastore.com/home.php

Answer 1

从相应的文件中删除以下CSS规则:

在home.php文件中

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

在carousel.css中

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

此外,添加margin-top: 51px;到.carousel类carousel.css文件,并删除height:500px同一类的,因为你有固定的导航栏.

Answer 2

我发现最好删除以下内容.

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

并在.carousel中删除:

height: 500px;

并在.carousel .item删除

 height: 500px;

对我来说,这使得图像按照我想要的方式工作,但一定要先在你的html中插入一个图像,否则我认为如果你在本地工作就会陷入虚无.

编辑:另一个用户建议我添加此
请注意,如果图像显示任何一侧或甚至一侧的灰色条,我建议保持

.carousel-inner > .item > img {
    min-width: 100%;
}