React+MUI实现点击放大图片后点击页面还原功能的技术咨询

要实现点击页面任意区域（包括放大后的图片）还原图片尺寸的功能，只需对现有代码做以下调整：

核心修改点 #

• 给Modal内部的图片容器添加点击事件，触发关闭逻辑
• 优化图片显示样式，避免放大后超出视口

修改后的完整代码 #

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import { CardMedia } from '@mui/material';

export default function BasicModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>View</Button>
      <Modal
        open={open}
        onClose={handleClose}
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Box
          sx={{
            width: '100%',
            maxWidth: '90vw',
            maxHeight: '90vh',
            cursor: 'pointer',
          }}
          onClick={handleClose}
        >
          <CardMedia 
            sx={{
              paddingTop: '100%',
              objectFit: 'contain',
            }}
            image="https://lorempokemon.fakerapi.it/pokemon"
            title="Image title"
          />
        </Box>
      </Modal>
    </div>
  );
}

关键说明 #

1. 点击任意区域关闭：通过Box包裹CardMedia并绑定onClick={handleClose}，实现点击图片区域触发关闭；同时保留Modal的onClose属性，点击Modal背景区域也会关闭，覆盖了“页面任意区域”的需求。
2. 优化显示体验：
   • maxWidth: '90vw'和maxHeight: '90vh'限制图片最大尺寸，避免超出视口
   • objectFit: 'contain'保证图片完整显示，不会被拉伸变形
   • cursor: 'pointer'给用户提供可点击的视觉提示

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