如何在聚合物 2.0 中制作元素全面屏？答案

【问题标题】：How to make an element full screen in polymer 2.0?如何在聚合物 2.0 中制作元素全面屏？
【发布时间】：2023-04-01 18:13:01
【问题描述】：

我有一个名为 my-app 的元素，它的 body 和 html 都设置为 100%。

在my-app 内部，我有另一个名为background-section 的元素，它的主体和html 设置为100%。在这个元素中，我有一个带有背景图像的部分。我希望这个背景图片是全屏的。

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('../../images/background-img2.jpg') no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  height: 100%;
}

问题是，由于某种原因，图像没有全屏显示。不知道为什么会这样。

【问题讨论】：

使用background-size:cover
@LokeshGupta 是的，我可以这样做，但我想要的是，当您访问该站点时，图像必须是全屏的，然后我向下滚动以查看页面的其他部分。
然后使用Height:100vh; 得到相同的结果。我根据您的需要发布了答案

标签： html css polymer custom-element polymer-2.x

【解决方案1】：

使用height:100vh 和background-size: cover; 得到相同的结果。

body, html {margin:0; padding:0;}

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('https://s-media-cache-ak0.pinimg.com/originals/90/6e/a5/906ea53ecaa5be963e960daf8b645af2.jpg') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  height: 100vh;
}

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

【讨论】：