Question

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

这是我的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.crousle ..请帮助我找出解决这个问题的任何方法。我在谷歌搜索但我没有找到任何文章..请帮助我找到解决方案。

Answer 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

Answer 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 指定特定屏幕的大小。 “％”中的尺寸可以更改图片的大小，但您必须使用 @media 并指定文字的字体大小。

如何使旋转木马滑块图像响应

2 个答案: