React MUI Card Component开发求助：图片加载及水平布局问题

以下是两种常见技术栈的解决方案，涵盖图片加载修复及图文水平对齐配置：

React Material-UI 实现方案 #

import React from 'react';
import { Card, CardContent, CardMedia, Box, Typography } from '@mui/material';

const CustomCard = () => {
  return (
    <Card sx={{ maxWidth: 600, display: 'flex', alignItems: 'center', padding: 2, borderRadius: 2 }}>
      {/* 图片区域 - 修复加载问题 */}
      <CardMedia
        component="img"
        sx={{ width: 150, height: 150, objectFit: 'cover', borderRadius: 1 }}
        image="https://i.sstatic.net/ft4fX.jpg"
        alt="卡片参考图"
      />
      {/* 文本区域 - 与图片水平对齐 */}
      <Box sx={{ marginLeft: 3, flexGrow: 1 }}>
        <Typography variant="h6" component="div" gutterBottom>
          卡片标题
        </Typography>
        <Typography variant="body2" color="text.secondary">
          这里是卡片的描述文本，可根据需求调整内容长度与样式。
        </Typography>
      </Box>
    </Card>
  );
};

export default CustomCard;

关键说明： #

• 图片加载修复：CardMedia指定component="img"直接渲染img标签（比背景图更易排查加载问题），objectFit保证图片比例正常，避免拉伸变形。
• 水平对齐实现：外层Card设置display: 'flex' + alignItems: 'center'，让图文垂直居中；文本容器用flexGrow: 1填充剩余空间，marginLeft控制图文间距。

原生 HTML/CSS 实现方案 #

<div class="custom-card">
  <img src="https://i.sstatic.net/ft4fX.jpg" alt="卡片参考图" class="card-image">
  <div class="card-text">
    <h3>卡片标题</h3>
    <p>这里是卡片的描述文本，可根据需求调整内容长度与样式。</p>
  </div>
</div>

<style>
.custom-card {
  max-width: 600px;
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.card-text {
  margin-left: 16px;
  flex: 1;
}

.card-text h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}

.card-text p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
</style>

关键说明： #

• 外层容器用flex布局实现水平排列，align-items: center保证图文垂直居中对齐。
• 图片设置固定宽高和object-fit防止变形，文本容器用flex:1占据剩余空间，通过margin-left控制间距。

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