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

我有引导传送带。其中一个项目只有一个没有内容的背景图片。我把一个高度，所以它仍然可以看到没有内容。但是，当我尝试在移动设备上查看它时，无法看到完整图像。只是其中的一部分。如何在调整屏幕大小或在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

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

回答

相关问题