为什么图像不适合页面屏幕尺寸？

Question

我在页面上放置了图片 (2400x1600)，但其中一部分被截掉了：

图像应该完全可见：

这是我的 css 代码：

.background-property {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 100vh;
    margin: auto;
}

如果您能解释失败的原因以及可能的解决方案，将不胜感激？

P.S。 HTML代码：

 <div class="hero-area-l1  position-relative" style="background: url(image/landing-1/new.png);">
      <div class="container">
        <div class="row">
          <div class="col-xxl-5 col-xl-6 col-lg-6 col-md-10 order-lg-1 order-1" >
            <div class="content">
              <h2>Are you ready</h2>
              <p>With lots of unique blocks, you can easily build a page without coding. Build your next website
                fast.</p>
              <div class="l1-create-acc-btn">
                <a href="#" class="btn btn-style-02">Create a free account <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

Answer 1

我建议使用 background-position: top, bottom, center。因为您的背景图片似乎偏离了 y 轴。我会尝试 background-position: bottom;

body {
    background: url('https://i.ibb.co/52RzfxG/new-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

body {
  margin: 0;
  color: Yellow;
}

h2 {
  margin-top: 0;
}

<body>
   <div class="hero-area-l1  position-relative">
      <div class="container">
        <div class="row">
          <div class="col-xxl-5 col-xl-6 col-lg-6 col-md-10 order-lg-1 order-1" >
            <div class="content">
              <h2>Are you ready</h2>
              <p>With lots of unique blocks, you can easily build a page without coding. Build your next website
                fast.</p>
              <div class="l1-create-acc-btn">
                <a href="#" class="btn btn-style-02">Create a free account <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</body>

Answer 2

您可以通过设置 background-size: 100% 100%;

来实现

.background-property {
    background-size: 100% 100%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 100vh;
    margin: auto;
}

为什么图像不适合页面屏幕尺寸？

Why image is not fit to page screen size?

html

css

image

responsive-design