html - 如何使 Bootstrap 轮播图像响应？

Question

我想保持相同比例的图像。问题是当浏览器很宽时它会拉伸(stretch)。并在减少时挤压。

我在这里检查了所有 SO 问题，但其中大部分对我没有帮助。

这是标记

<!-- 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.css 文件中的 .carousel 类，并从中删除 height:500px类，因为你有固定的导航栏。