Angular Material卡片上传图片后格式错乱内容不显示问题

基于网格布局实现商品卡片组件时，上传自定义商品图片后卡片整体格式损坏，价格标签、活动标签、商品名称、商品描述、操作按钮等元素全部无法正常显示。
效果对比：

• 未上传图片（使用默认占位图）的正常效果：
• 上传图片后的错乱效果：

三个核心问题导致布局错乱：

• 图片样式存在无效属性+父容器无高度约束：.image img里的position: center是完全无效的CSS写法，不存在这个取值；同时父容器.image没有设置固定高度，给img写的height:100%根本不生效。默认占位图尺寸固定所以显示正常，用户上传的图片尺寸不统一时，会按照原始宽高比把容器撑得很高，而mat-grid-list设置了固定rowHeight="500px"，超出的内容就会被裁切或者挤错位。
• Angular Material网格瓦片的布局特性未适配：mat-grid-tile内部默认用绝对定位做内容对齐，瓦片内的直接子div没有设置宽高100%撑满瓦片，内容溢出时布局规则直接失效。
• 购物车栏的偏移逻辑有问题：原代码中.cart-item默认设了top:-30px，靠hover修改top值实现动画，上方图片高度一旦变高，这个负偏移会直接把购物车栏和下方的标题、描述区顶到瓦片可视范围外，看起来就像元素消失了。

直接替换对应CSS样式即可，不需要大改HTML结构：

/* 撑满网格瓦片内部空间 */
mat-grid-tile > div {
  width: 100%;
  height: 100%;
}

.my-card {
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
  border-radius: 3px;
  /* 用flex布局拆分卡片上下区域 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-main {
  position: relative;
  /* 占满卡片除内容区外的剩余高度 */
  flex: 1;
  overflow: hidden;
}

/* 修正图片容器和图片样式 */
.image {
  width: 100%;
  height: 100%;
}
.image img {
  width: 100%;
  height: 100%;
  /* 删除无效的position: center，替换为正确的图片适配属性 */
  object-fit: cover;
  object-position: center;
}

/* 重写购物车栏的动画逻辑，避免负偏移顶错位置 */
.cart-item {
  text-align: center;
  line-height: 45px;
  background: #fa0;
  transition: all 0.4s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  opacity: 0;
}
.cart-item ul {
  padding: 0;
  margin: 0;
}
.cart-item ul li {
  display: inline-block;
  list-style-type: none;
  position: relative;
  font-size: 25px;
}
.cart-item ul li::after {
  content: '';
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, .15);
  position: absolute;
  left: -2px;
  top: 10px;
}
.my-card:hover .cart-item {
  opacity: 1;
  transform: translateY(0);
}

/* 固定内容区高度，防止被挤压 */
.content {
  padding: 16px 0;
  text-align: center;
  flex-shrink: 0;
}

额外优化点：可以给商品主图加加载失败兜底，避免base64数据损坏时出现裂图影响布局，在主图img标签上加(error)="$event.target.src='/assets/images/no_image_found.jpg'"即可。

内容的提问来源于stack exchange，提问作者nargyriou