如何使引导轮播图像响应？ [英] How to make bootstrap carousel image responsive?

问题描述

我想保持图像的相同比例。问题是，当浏览器是宽的时候。

I want to keep the same ratio of the images. The problem is it streches when the browser is wide. and squezes when it's reduced.

我已经检查过所有的SO问题，但大多数都没有帮助我。

I have checked all SO question here but most of them did not help me.

这里是标记：

<!-- 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

---

and here is the CSS

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

我试图使一个jsfiddle，但我couldnt这里是页面的链接 http://maanastore.com/home.php

I tried to make a jsfiddle but I couldnt here is the link to the page http://maanastore.com/home.php

推荐答案

从各个文件中删除以下CSS规则：

Remove the following CSS rules from respective files:

在home.php文件中

In home.php file

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

crousel.css

in 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 ，因为你有固定的navbar。

Also, add margin-top: 51px; to .carousel class in carousel.css file and remove height:500px from the same class, because you have fixed navbar.

这篇关于如何使引导轮播图像响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！