調整背景圖片的大小取決於屏幕

Question

我有引導傳送帶。 其中一項僅具有背景圖像而沒有內容。 我放了一個高度，所以即使沒有內容也可以看到它。 但是當我嘗試在移動設備上查看時，不是，我看不到完整圖像。 只是一部分。 當屏幕調整大小或在RWD視圖中時，如何調整圖像大小。 我嘗試將絕對位置放在特定項目上，並使父div位置相對，但是當我將絕對位置放到該項目時，該項目就會消失。

這是我的代碼

<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

你可以放
背景位置：100％100％； 最大高度：100％; 最大寬度：100％

那你的問題就解決了

Answer 2

您可以使用css樣式專有的backgound-size:100% 100%來拉伸div中的圖像，也可以使用background-size:contain將圖像包含在div中（不包括Stretchig，但不會覆蓋整個div

Answer 3

您可以使用以下補丁。 在此解決方案中，您將在DIV中獲得圖像的完整封面和圖像的中心部分。

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