调整背景图片的大小取决于屏幕

Question

I have bootstrap carousel. One of the items only have a background image without a content. I put a height so it still can be seen without a content. But when I try to view it on mobile, its not I cannot see the full image. Just a portion of it. How can I make the image resize when the screen resize or in RWD view. I try to put position absolute on the specific item and make the parent div position relative but that item disappear when I put position absolute.

Here's my code

<div id="custom-banner-wrapper" style="position: relative;">
   <div id="custom-banner" class="carousel slide" data-ride="carousel">

     <div class="carousel-inner custom-banner-inner">

     <div id="custom-banner-fullwidth" class="item custom-banner-item active" 
     style='background-color: #2c1946;  background-image: url("./catalog/view/theme/broadwaytheme/images/banner-1.png");  background-repeat:no-repeat; background-position: top center; background-size: cover; position:absolute;'>
      <div class="container">
       <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-banner-caption">

        </div>
      </div>
    </div>
  </div>
</div>
<ol class="carousel-indicators" style="bottom:0px;">
  <li data-target="#custom-banner" data-slide-to="0" class="active"></li>
  <li data-target="#custom-banner" data-slide-to="1"></li>
  <li data-target="#custom-banner" data-slide-to="2"></li>
</ol> </div></div>

Answer 1

You can put
background-position:100% 100%; max-height:100%; max-width:100%

Then your problem will solved

Answer 2

您可以使用css样式专有的backgound-size:100% 100%来拉伸div中的图像，也可以使用background-size:contain将图像包含在div中（不包括Stretchig，但不会覆盖整个div

Answer 3

you can use below patch. in this solution you'll get the full cover of image and the center part of the image in your DIV.

.your_class { background-size: cover; background-position:center center;}