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

我有引導傳送帶。其中一個項目只有一個沒有內容的背景圖片。我把一個高度，所以它仍然可以看到沒有內容。但是，當我嘗試在移動設備上查看它時，無法看到完整圖像。只是其中的一部分。如何在調整屏幕大小或在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>

來源

2016-03-22 Alyssa Reyes

這將是偉大的，如果你會提供工作演示.. thanx –

你可以分享你的源代碼的工作例子，或小提琴@Alyssa雷耶斯 –

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

然後你的問題將得到解決

來源

2016-03-22 10:29:26 Themebox

您可以使用CSS樣式禮backgound-size:100% 100%，並且將拉伸圖像在div，或者您可以使用background-size:contain和圖像將被包含在div裏（沒有stretchig它，但不會覆蓋整個div）

來源

2016-03-22 10:51:38 Aleksander

你可以使用下面的補丁，在這個解決方案中，你將得到圖像的全部覆蓋和你的DIV中圖像的中心部分

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

來源

2016-03-22 11:55:52

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

回答

相關問題