Html 如何使用flex布局使图像大小具有响应性
我想使图像的大小对屏幕大小作出响应,但它无法工作。我想在小屏幕上显示整个图像,但它只显示了图像的一半。如果有人知道是什么问题,请告诉我。谢谢Html 如何使用flex布局使图像大小具有响应性,html,css,angular,angular-material,angular-flex-layout,Html,Css,Angular,Angular Material,Angular Flex Layout,我想使图像的大小对屏幕大小作出响应,但它无法工作。我想在小屏幕上显示整个图像,但它只显示了图像的一半。如果有人知道是什么问题,请告诉我。谢谢 <div class="flex-container" fxLayout="row" fxLayout.xs="column"> <div class="flex-item" fxFlex=50> <img alt=&q
<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>
我的做法如下:
<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>
嗨,你好吗