如何使轮播滑块图像响应

Question

I tried lot but didn't find the solution how to make image responsive and my caption also not in responsive.

here is my html code:

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

Here is my css code:

#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;

      }

I provide the html and css code of my website . i tried it lot but cant able to make my image responsive. for the slider i used owl.crousle ..please help me to find out any way to slove this problem.I searched on google but i didn't find any article ..please help me to find the solution.

Answer 1

Try this

.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%;

  }

Use this slider startbootstrap-full-slider

Answer 2

Try this 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;

  }

For making Responsive Images, its good to specify the height and width in ' % ', or use @media to specify the size for particular screen. size in ' % ' can change the size of images, but you have to use @media and specify the font size for text .