Блог

Я столкнулся со странной проблемой..У меня есть карта, и она оставляет свободное место внизу

Это код: app.component.html

 <div fxLayout="row">
  <mat-card fxLayout="row" fxFlex="80%" class="center space-top">
    <mat-card-content fxLayout.gt-sm="row">
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="40%">
        <img mat-card-image src="../../../assets/background.jpg" alt="background image">
      </div>
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter">
        <router-outlet></router-outlet>
      </div>
    </mat-card-content>
  </mat-card>
</div>
  

часть css:

 .center {
  margin-left: auto;
  margin-right: auto;
}

.space-top {
  margin-top: 5%;
}

@media only screen and (min-width: 799px){
  .gutter {
    margin-left: 32px;
  }
}
  

Хорошо, итак, что на самом деле произошло, высота моей формы была больше высоты изображения слева. Итак, мне пришлось добавить несколько свойств css к изображению

 img {
  height: fit-content; //so that it takes up full space
  max-height: 500px !important; // this prevents the image from being extremely big
  object-fit: cover; 
  object-position: center; /* this centers and crops the image so that it doesn't break the aspect ratio */
}