Material UI CardMedia组件使用picture标签替代img的实现咨询

Material UI的Card组件中，CardMedia组件用于媒体展示，官方示例里是把它当作img组件来展示图片。我想改用HTML的picture标签替代img，但官方没有相关示例。

我试了下面的代码，虽然能生成picture标签，但不知道怎么在里面添加source和img标签：

<CardMedia
  component="picture"
  height="140"
  image="/static/images/cards/contemplative-reptile.jpg"
  alt="green iguana"
/>

期望生成的HTML结构如下：

<picture>
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img src="logo-320.png" alt="logo" />
</picture>

当把CardMedia的component设为picture时，你可以直接通过children属性传入source和img标签，不需要再使用CardMedia自带的image和alt属性（这些属性是针对img组件设计的）。

完整的实现代码如下：

<CardMedia component="picture" height="140">
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img 
    src="logo-320.png" 
    alt="logo" 
    style={{ height: '100%', width: '100%', objectFit: 'cover' }}
  />
</CardMedia>

补充说明：

• 保留CardMedia的height属性可以维持卡片媒体区域的固定高度
• 给img添加objectFit: 'cover'样式，能让图片适配CardMedia的容器尺寸，避免拉伸变形
• 可根据需求添加多个source标签，适配不同屏幕尺寸或图片格式

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