如何在React Bootstrap中实现点击图片全屏显示

实现思路 #

通过React状态控制全屏模态框的显示/隐藏，点击卡片内的图片时触发模态框打开，模态框内放置自适应全屏的图片，点击模态框背景或关闭按钮即可退出全屏视图。

修改后的完整代码 #

import { useState } from 'react';
import { Card, ListGroup, Button, Modal } from 'react-bootstrap';

function ImageCard({ images, name, number, type }) {
  // 控制模态框显示的状态
  const [showFullscreen, setShowFullscreen] = useState(false);

  return (
    <>
      <Card style={{ width: '18rem' }}>
        {/* 给图片添加点击事件，触发全屏模态框 */}
        <Card.Img 
          variant="top" 
          src={images} 
          style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem', cursor: 'pointer' }}
          onClick={() => setShowFullscreen(true)}
        />
        <Card.Body>
          <Card.Title>{name}</Card.Title>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroup.Item>{number}</ListGroup.Item>
          <ListGroup.Item>{type}</ListGroup.Item>
        </ListGroup>
        <Card.Body>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>

      {/* 全屏模态框 */}
      <Modal 
        show={showFullscreen} 
        onHide={() => setShowFullscreen(false)}
        fullscreen={true}
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title>{name}</Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
          <img 
            src={images} 
            alt={name}
            style={{ maxWidth: '100%', maxHeight: '100vh' }}
          />
        </Modal.Body>
      </Modal>
    </>
  );
}

export default ImageCard;

关键说明 #

• 状态管理：用useState创建showFullscreen状态，控制模态框的显示与隐藏。
• 图片交互：给Card.Img添加onClick事件，点击时切换状态打开模态框，同时设置cursor: 'pointer'提示可点击。
• 全屏模态框：借助React-Bootstrap的Modal组件，设置fullscreen={true}实现全屏效果，内置关闭按钮和背景点击关闭逻辑。
• 图片自适应：模态框内的图片设置maxWidth: '100%'和maxHeight: '100vh'，确保图片在全屏容器内自适应显示，不会超出视口范围。

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