html - 如何使用 flex 布局 Angular 使图像的大小响应
问题描述
我想让图像的大小对屏幕的大小做出响应,但它不起作用。我想在小屏幕上显示整个图像,但它只显示图像的一半。如果有人知道是什么问题,请告诉我。谢谢
<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>
推荐阅读
- python - 为什么从寄存器中读取的值总是为零?(Pymodbus)
- python - 尝试从数据集中提取 y_val 会抛出“所有输入数组必须具有相同的维数”
- xcode - Xcode 12“显示库”命令不再显示可能要添加的视图
- c# - StackExchange.Redis 哨兵操作
- css - 从图像混合 sass 自动生成渐变颜色
- reactjs - 强制选择行
- fortran - 尝试使用 f2py 围绕两个 C 对象编写 Fortran 包装器时出现分段错误
- reactjs - 添加更多数据后,带有 reduxjs Web 应用程序的 ReactJs 变慢
- javascript - 拆分日期的 Javascript 字符串并按年份分组
- javascript - 在 D3.js 中重新定位地图后重置拖动位置