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中（不会拉伸它，但不会覆盖整个div。

Answer 3

你可以使用下面的补丁。在此解决方案中，您将获得图像的完整封面以及DIV中图像的中心部分。

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

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

3 个答案: