角度分量背景图片大小问题答案

【问题标题】：angular component background image size problem角度分量背景图片大小问题
【发布时间】：2021-06-09 10:26:23
【问题描述】：

我是网络开发的初学者，我的角度组件有问题我尝试制作背景图像，当我让它们可见时，主体包含带有 *ngif 指令的 div，我的身体高度不会改变并且窗口保持旧的高度大小，所以请你告诉我如何解决这个问题谢谢这里是我的代码的一些例子

<html>
  <body>
     <form [formGroup]="add_trader" >
         <ng-template [ngIf]="trader== true" >
            <div class="float-left" >
                <div class="card cards-shadown cards-hover rounded"  >

                        !!! some code
                </div>
            </div>
         </ng-template>
      </form> 

  </body>
</html>

我的css文件

body {
  background-image: url("https://images.unsplash.com/photo-1527176930608-09cb256ab504?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1353&q=80");
 
  height: 100%;
  width:  100%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

【问题讨论】：

标签： html css angular background height

【解决方案1】：

将height:100% 更改为min-height:100vh

body {
  background-image: url("https://images.unsplash.com/photo-1527176930608-09cb256ab504?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1353&q=80");
 
  min-height: 100vh;
  width:  100%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

【讨论】：

我尝试在添加 div 后跟随身体的高度，它似乎是一样的，我对 css 有基本的了解，但我认为它保持静态并产生溢出