如何使轮播滑块图像响应答案

【问题标题】：how to make carousel slider image responsive如何使轮播滑块图像响应
【发布时间】：2016-05-30 07:03:10
【问题描述】：

我尝试了很多，但没有找到解决方案如何使图像响应并且我的标题也没有响应。

这是我的 html 代码：

<section id="banner">

    <div class="banner-bg">
        <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-1.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-2.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-3.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-4.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3 id="caption1">Suburban Mumbai’s Best Serviced Apartment</h3><h3 id="caption2">The Perfect Home Away From Home</h3>
          </div>
          <img class='img-responsive' src="<?php echo base_url('assets/img/slider-5.jpg'); ?>"  alt="">
      </div>
    </div>
</div>

这是我的css代码：

#banner .banner-bg .banner-bg-item {
  height: 100vh;
  min-height: 650px;
  background-size: cover;
  background-position: center;
}

#banner .banner-bg .banner-bg-item .img-responsive{
    max-width: 100%;
    height: auto !important;
    display:block;

}

@media (max-width: 768px) {
  #banner .banner-bg .banner-bg-item {
    min-height: 920px;
  }

.banner-bg .banner-bg-item .textoverlay{
          padding-top: 30%;
          padding-left: 12%;
          color:  white;
      }
        .banner-bg .banner-bg-item .textoverlay #caption1{
          background-color: rgba(0, 26, 9, 0.3);
          width: 640px;
      }
        .banner-bg .banner-bg-item .textoverlay #caption2{
          background-color: rgba(0, 26, 9, 0.3);
          width: 500px;

      }

我提供我网站的 html 和 css 代码。我尝试了很多，但无法使我的图像响应。对于滑块，我使用 owl.crosle ..请帮我找出解决这个问题的任何方法。我在谷歌上搜索但没有找到任何文章..请帮我找到解决方案。

【问题讨论】：

添加JSFiddle 会很有帮助
我不知道如何创建它
请帮我找到解决办法...
我认为与 codeigniter 没有任何关系
能否添加视图截图

标签： javascript html css codeigniter

【解决方案1】：

试试这个

.banner-bg .banner-bg-item .textoverlay{
      padding-top: 30%;
      padding-left: 12%;
      color:  white;
  }
    .banner-bg .banner-bg-item .textoverlay #caption1{
      background-color: rgba(0, 26, 9, 0.3);
      width: 100%;
  }
    .banner-bg .banner-bg-item .textoverlay #caption2{
      background-color: rgba(0, 26, 9, 0.3);
      width: 100%;

  }

使用此滑块startbootstrap-full-slider

【讨论】：

【解决方案2】：

试试这个 CSS，

#banner .banner-bg .banner-bg-item {
   height: 75%;
   min-height: 250px;
   background-size: cover;
   background-position: center;
   width: 50%;
}
.textoverlay {
   height: 10%;
}

#banner .banner-bg .banner-bg-item .img-responsive{
    max-width: 100%;
    display: block;
    height: 90%;

 }

  @media (max-width: 768px) {
     #banner .banner-bg .banner-bg-item {
      min-height: 920px;
  }

.banner-bg .banner-bg-item .textoverlay{
      padding-top: 30%;
      padding-left: 12%;
      color:  white;
  }
    .banner-bg .banner-bg-item .textoverlay #caption1{
      background-color: rgba(0, 26, 9, 0.3);
      width: 640px;
  }
    .banner-bg .banner-bg-item .textoverlay #caption2{
      background-color: rgba(0, 26, 9, 0.3);
      width: 500px;

  }

为了制作响应式图片，最好在 '%' 中指定高度和宽度，或使用 @media 指定特定屏幕的尺寸。 '%' 中的 size 可以改变图片的大小，但你必须使用 @media 并指定 text 的字体大小。 p>

【讨论】：