html - 当屏幕分辨率较小时，背景中的图像会被裁掉

Question

.banner-1{
  background: #f0f0f0;
}
.pcontainer {
  background: url(https://i.imgur.com/R1tpEs7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 32px;
  margin-top: 122px;
  padding-top: 61px;
  padding-bottom: 56px;
  padding-left: 44px;
}

<div  class="container-fluid banner-1">      
  <div class="row">        
    <div class="col">
      <div class="triangle-down"></div> 
        <div class="row">
          <div class="col offset-md-6 pcontainer">
            <h2>Why Move to Websphere Commerce v9</h2>
              <p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them. </p>
              <p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep               <br>capabilities so you gain maximum impact from every customer interaction and transaction.</p>
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
              Learn More
              </button>
          </div>
        </div>
     </div>
   </div>
</div>

我已经创建了一个容器 banner-1。在此之下，我创建了另一个带有矩形背景图像的容器 pcontainer 。现在我面临的问题是，每当我在移动设备/平板电脑上进行测试时，矩形图像中的折叠都会被裁掉，但在桌面站点中，它会显示完整宽度。有没有办法在背景中没有裁剪图像。我希望在背景中显示带有折叠的完整图像。

Answer 1

尝试移除 pcontainer 的边距:

.banner-1 {
  background: #f0f0f0;
}

.pcontainer {
  background: url(https://i.imgur.com/R1tpEs7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 0;
  margin-top: 0;
  padding-top: 61px;
  padding-bottom: 56px;
  padding-left: 44px;
}

<div class="container-fluid banner-1">
    <div class="row">
        <div class="col">
            <div class="triangle-down"></div>
            <div class="row">
                <div class="col offset-md-6 pcontainer">
                    <h2>Why Move to Websphere Commerce v9</h2>
                    <p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them.</p>
                    <p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep
                        <br>capabilities so you gain maximum impact from every customer interaction and transaction.</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                        Learn More
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>