上傳和顯示的圖像的寬度是通過使用max-width:100%;ReactCrop裁剪原始圖像來改變的。我嘗試更改圖像寬度，使其隨容器寬度自動調整，但反應圖像裁剪十字線不會適應它，而是根據以前的分辨率裁剪圖像。在我附加的圖像中，您可以看到裁剪部分的圖像沒有出現在裁剪預覽中。它顯示的是原始分辨率的裁剪預覽。import React from "react";import ReactCrop from "react-image-crop";import { Button } from "antd";import "./custom-crop.scss";import {  image64toCanvasRef,  extractImageFileExtensionFromBase64,  base64StringtoFile,  downloadBase64File} from "./reusableUtils";class ImageUploader extends React.Component {  constructor(props) {    super(props);    this.imagePreviewCanvasRef = React.createRef();    this.state = {      isVerified: false,      imgSrc: null,      imgSrcExt: null,      crop: {        aspect: 1 / 1,        unit: "px", // default, can be 'px' or '%'        x: 130,        y: 50,        width: 200,        height: 200      }    };  }  onChange(e) {    let currFile = e[0];    let fileReader = new FileReader();    fileReader.addEventListener(      "load",      () => {        this.setState({          imgSrc: fileReader.result        });      },      false    );    fileReader.readAsDataURL(currFile);  }  handleOnCropChange = crop => {    this.setState({ crop: crop });  };  handleImageLoaded = () => {    // console.log(image);  };  handleOnCropComplete = crop => {    //console.log(crop, pixelCrop)    const canvasRef = this.imagePreviewCanvasRef.current;    const { imgSrc } = this.state;    // const imageData64 = canvasRef.toDataURL("image/" + fileExtension);    const fileExtension = extractImageFileExtensionFromBase64(imgSrc);    const fileName = "profile_pic." + fileExtension;    const myNewCrop = base64StringtoFile(imgSrc, fileName);    this.setState({ imgSrcExt: myNewCrop });    image64toCanvasRef(canvasRef, imgSrc, crop);  };