小编典典

如何使自举轮播图片具有响应性?

css

我想保持相同的图像比例。问题是浏览器较宽时它会扭伤。并在缩小时挤压。

我在这里检查了所有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%;
}

阅读 303

收藏
2020-05-16

共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;.carouselcarousel.css文件中的类并height:500px从同一类中删除,因为您已固定了导航栏。

2020-05-16