如何使用 flex 布局 Angular 使图像的大小响应答案

【问题标题】：How to make make size of image responsive with flex layout Angular如何使用 flex 布局 Angular 使图像的大小响应
【发布时间】：2020-10-30 03:13:04
【问题描述】：

我想让图像的大小根据屏幕大小做出响应，但它不起作用。我想在小屏幕上显示整个图像，但它只显示图像的一半。如果有人知道是什么问题，请告诉我。谢谢

<div class="flex-container" 
 fxLayout="row" 
 fxLayout.xs="column">
  <div class="flex-item" fxFlex=50>  
      <img alt="image" src="../assets/image.png"/>
  </div>
  <div class="flex-item" fxFlex=33>
     <img  alt="image" src="../assets/image.png"/>
  </div>  
</div>

【问题讨论】：

css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css angular angular-material angular-flex-layout

【解决方案1】：

我是这样做的：

 <div fxFlexFill class="example-container">
    <div fxLayout="column" fxLayoutGap="32px" [style.height]="'100%'">
      <mat-card class="card-margins">
        <mat-card-title></mat-card-title>
          <div
            fxLayout="row"
            fxLayoutGap="32px"
            fxLayout.lt-sm="column"      
            fxLayoutGap.lt-sm="10px">
            <div fxFlex="0 100 100%">
                <img mat-card-image src="../assets/image.png" alt="Free image">
            </div>
          </div>
          <div fxFlex="0 0 calc(50%-36px)">
            <mat-card-content>
              <p>Hi, how are you?</p>
            </mat-card-content>
            </div>
        </mat-card>
      </div>
    </div>

【讨论】：